As mentioned on the previous page, videos were initially more complicated to implement. The code was more complex, support was all over the place, and users often were required to install plugins onto their browsers. In the effort to simplify, HTML5 video functions on just about any browser or device, and does not require any special setup or installations.
Keeping the focus on simplicity, the setup for HTML5 video code is very similar to the one for audio. An HTML5 video player is established with a <video> tag, and the video file's location and media type is set within a <source> tag. The major difference between the HTML5 video and audio players is that the video player, since it's actually used to view and not just listen, can take on size attributes. Inside the <video> tag, you can assign the width and height at which the player will display.
|
<video width="320px" height="240px"> <source src="file.mp4" type="video/mpeg"> </video> |
A couple file types are still having problems with compatibility, whether it's with browser, devices, or both. If you stack multiple file types of the same video, you have the option of your video player falling back on other versions. So if there's a file type you'd really prefer to use, but it doesn't work on some devices, just be sure to add a more broadly functional version as well below it to ensure all of your users will get to see the video.
|
<video> <source src="file.mp4" type="video/mpeg"> <source src="file.ogg" type="video/ogg"> This browser does not support HTML5 video. </video> |
