HTML and CSS Reference
In-Depth Information
5.5 Making Video Loop
Problem
You want your video playback to loop automatically.
Solution
Add the
loop
Boolean attribute to
video
:
<video controls width="640" height="360"
loop
>
<source src="video.mp4" type="video/mp4" />
<source src="video.ogv" type="video/ogg" />
Your device does not support HTML5 video.
</video>
Discussion
As of this writing, Firefox does not support
loop
unless the user has the Media Loop
add-on (
https://addons.mozilla.org/en-US/firefox/addon/media-loop-45730/
)
installed.
All other browsers will loop natively.
That said, use
loop
thoughtfully
. Consider how your users will experience a video that
loops and whether that experience will be appropriate for your particular video and
pleasant for your audience.
autoplay
Another
video
attribute you should judiciously consider before implementing is the
Boolean
autoplay
. Just as when it is used with
audio
(see
Recipe 4.2
),
autoplay
starts
playing the video as soon as the page loads. This can make for an extremely unpleasant
user experience.
See Also
Not all Firefox users will know about the Media Loop add-on, much less have it
installed. If you desperately need looping to work across all browsers, you can consider
a JavaScript-based solution:
http://forestmist.org/2010/04/html5-audio-loops/
.
5.6 Sample Design: Manipulating Video with <canvas>
Problem
You want to embed a video from YouTube, but you want a better preview of how the
video might appear than the default selection key (see
Figure 5-4
).
