Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML 5 video custom controls

Tags:

html

video

Like many web developers I'm looking forward to streaming video that utilizes the new HTML 5 <video> tag. Browser support definitely isn't wide enough yet, so using a Flash/SWF fallback is a must.

This got me thinking: in Flash it's possible to highly customize the playback controls (pause, play, stop, seek, volume, etc.) in HTML 5?. What options are there for customizing the glyphs, icons and colors of video controls? Is Javascript required? For instance the following page renders different controls depending on the browser - tested using FF3.5, Chrome and Safari:

http://henriksjokvist.net/examples/html5-video/

It would be really awesome to customize and standardize controls across browsers and even match the Flash controls used by older browsers.

like image 750
leepowers Avatar asked Jan 21 '10 06:01

leepowers


People also ask

How do I customize a video player in HTML?

Step 2 – HTML Markup To create the video player we only need to add the new HTML5 video tag. Then we will add some attributes to the video tag: the width and height of the video and the poster. The poster is the image that you can add to be shown on top of the video until the user press the play button.

What is the correct HTML5 element for playing video files?

<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.


1 Answers

In the HTML5 spec, there is a controls attribute for <video>.

Also check out this article: Video on the Web - Dive into HTML5. It explains:

By default, the element will not expose any sort of player controls. You can create your own controls with plain old HTML, CSS, and JavaScript. The element has methods like play() and pause() and a read/write property called currentTime. There are also read/write volume and muted properties. So you really have everything you need to build your own interface.

If you don’t want to build your own interface, you can tell the browser to display a built-in set of controls. To do this, just include the controls attribute in your tag.

like image 98
Philip Morton Avatar answered Sep 18 '22 23:09

Philip Morton