Playing Video (Part 1)

Playing Video in HTML (1) Much as we saw with audio files, older versions of HTML could not play video files natively. Instead, they relied on external resources, such as: Browser plug-ins (Adobe Flash, Apple QuickTime, Microsoft Silverlight) JavaScript players, such as jPlayer or VideoJS External applications, such as Windows Media Player The predominant method of playing video in HTML was to use Adobe Flash, which had a very high installed base across all browsers and platforms. To call the Flash player, we used the <embed> or <object> elements: <embed src="video/example.swf" height="300" width="300"> <object data="video/example.swf" height="300" width="300"></object> A file with the swf (pronounced "swiff") extension is in Shockwave Flash format and is designed to be played by the Adobe Flash plug-in.

Playing Video in HTML (2) Another common method for inserting video into an HTML page was to upload the video to YouTube and then use the copy-and-paste <embed> code provided by YouTube: <embed width="420" height="315" src="http://www.youtube.com/v/DqGOquw2K_U" type="application/x-shockwave-flash"></embed> YouTube videos (using the <embed> code) still used the Flash plugin installed on browsers. By utilizing YouTube, though, web designers did not have to do their own file format conversions, did not have to store the large video files on their local servers, and could let YouTube stream the video instead of using up their own web hosting bandwidth. Using Flash for internet video has some problematic issues: The Flash plug-in needs to be installed and maintained and crashes occasionally. The player interface and features are outside of our direct control. Apple iPhones and iPads do not support Flash and will display an empty box on the screen instead.

Playing Video in HTML5 HTML5 introduced the <video> element. The goal is to play video files natively within the browser, which carries the same advantages as we saw with the <audio> element: No longer necessary to install and maintain specific browser plug-ins. Faster and smoother performance, as no plug-ins or JavaScript need to be loaded prior to play. More consistent behavior across different browsers, versions, and platforms. Wider control over player features. Just as we saw with the <audio> element, there are many browser support and file/encoding format issues that stand in the way of embracing the <video> element fully.

The <video> Element Let's use the new <video> element to add a video directly to our page: <p>Watch the majesty of Rocky Mountain National Park:</p> <video src="video/rmnp.mp4" controls></video> Chrome 25.0 IE 10.0 The "controls" attribute works the same way as it did in the <audio> element. Once again, be sure to include the closing </video> tag.

Attributes for <video> Element The <video> element uses the same preload attribute to recommend to the browser what to do with the video file when the web page loads. The same three settings (auto, metadata, and none) apply: <video src="video/rmnp.mp4" preload="auto" controls></video> The autoplay attribute works the same way with <video> as it did with <audio>. Once again, it is not recommended, unless the visitor is expecting a video to begin playing on the page. To enable the feature, we just add the attribute: <video src="video/rmnp.mp4" controls autoplay></video> The loop attribute performs the same function as we saw before, continually restarting the video from the beginning once it has completed: <video src="video/rmnp.mp4" controls loop></video>

Height and Width Attributes The <video> element also allows us to specify the height and width of our video window. Players will usually auto-size to the dimensions of the video, but the best approach is to list these dimensions for all videos: <p>Watch the majesty of Rocky Mountain National Park:</p> <video src="video/rmnp.mp4" width="640" height="428" controls></video> <video src="video/rmnp.mp4" width="480" height="321" controls></video> <video src="video/rmnp.mp4" width="320" height="214" controls></video> IE 10.0

The Poster Attribute The poster attribute lets us select an image to display in the video window instead of the first frame of the video, which is the default. This is a useful feature, as it will also display our selected image in the following instances: The preload attribute is set to "none". The video file is missing. <p>Watch the majesty of Rocky Mountain National Park:</p> <video src="video/rmnp.mp4" poster="images/rmnp.jpg" width="480" height="321" controls> </video> IE 10.0

Current Browser Support for <video> Just like its <audio> counterpart, <video> is well-supported across the major web browsers, including IE9.0 and most mobile browsers. But once again, support for different formats makes for an implementation challenge, which we will take on in the next lesson.