controls property of video tag

Viewed 25
Your browser does not support the video tag.

When the mouse pointer is on the div area which contains the video, the video is shaking. But when the controls in the video tag is removed , no shaking. Why?

1 Answers

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

This example is taken from the book HTML5 Up and Running. You list each supported video encoding separately within a single tag. The browser will try each one, starting with the first. This example shows three encodings. You will need do the actual video encoding yourself. To support multiple browsers, you'll need multiple encodings.

The final entry is a fallback for browsers that don't support the new HTML5 video tag. In the example, I used flash, but you can use whatever old-school format you prefer.

Related