HTML and CSS Reference
In-Depth Information
5.5 Making Video Loop
You want your video playback to loop automatically.
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.
As of this writing, Firefox does not support loop unless the user has the Media Loop
add-on ( ) 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.
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: .
5.6 Sample Design: Manipulating Video with <canvas>
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 ).
Search WWH ::

Custom Search