There are many ways to play videos in HTML. 11.53.1. HTML video (Videos) playback Example < videowidth = "320" height = "240" controls >< sourcesrc = "movie.mp4" type = "video/mp4" >< sourcesrc = "movie.ogg" type = "video/ogg" >< sourcesrc = "movie.webm" type = "video/webm" >< objectdata = "movie.mp4" width = "320" height = "240" >< embedsrc = "movie.swf" width = "320" height = "240" >object >video > 11.53.2. Problems and solutions Playing videos in HTML is not easy!
You need to be familiar with a lot of tricks to ensure that your video files can be played in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac, iPad, iPhone).
In this chapter, the rookie tutorial summarizes the problems and solutions for you.
11.53.4. Use the < object > tag The role of tags is to embed multimedia elements in HTML pages. The following HTML clip shows a Flash video embedded in a web page:
Example < object data = "intro.swf" height = "200" width = "200" >object > Question:
If the browser does not support Flash, the video cannot be played.
IPad and iPhone cannot display Flash video.
If you convert the video to another format, it still won’t play in all browsers.
11.53.5. Use the HTML5 < video > element HTML5 the tag defines a video or movie. elements are supported in all modern browsers. The following HTML snippet shows a video in ogg, mp4, or webm format embedded in the web page:
Example < video width = "320" height = "240" controls > < source src = "movie.mp4" type = "video/mp4" > < source src = "movie.ogg" type = "video/ogg" > < source src = "movie.webm" type = "video/webm" > Your browser does not support video tags . video > Question:
You must convert the video to many different formats.
the element is not valid in older browsers. 11.53.6. The best HTML solution Four different video formats are used in the following examples. HTML 5 the element attempts to play the video in one of the mp4, ogg, or webm formats. If both fail, fall back to element. 11.53.7. HTML 5 + < object > + < embed > < video width = "320" height = "240" controls > < source src = "movie.mp4" type = "video/mp4" > < source src = "movie.ogg" type = "video/ogg" > < source src = "movie.webm" type = "video/webm" > < object data = "movie.mp4" width = "320" height = "240" > < embed src = "movie.swf" width = "320" height = "240" > object > video > Question:
11.53.8. Use hyperlinks If a web page contains a hyperlink to a media file, most browsers use Auxiliary applications to play the file.
The following code snippet shows a link to the AVI file. If the user clicks on the link, the browser will launch an “auxiliary application”, such as Windows Media Player, to play the AVI file:
Example < a href = "intro.swf" > Play a video file a > 11.53.9. Instructions on inline video When video is included in a web page, it is called inline video.
If you plan to use inline video in your web application, you need to be aware that many people find inline video exasperating.
Also note that the user may have turned off the inline video option in the browser.
Our best advice is to include them only where users want to see inline videos. A positive example is that when a user needs to see a video and click on a link, the page opens and the video is played.
11.53.10. HTML multimedia tags New: new HTML5 tag.
Label
Description
< embed >
Define embedded objects. It is not approved in HTML4 and allowed in HTML5.
< object >
Define embedded objects.
< param >
Define the parameters of the object.
< audio > New
Defines the sound content
< video > New
Define a video or movie
< source > New
Multimedia resources that define media elements (< video > and < audio >)
< track > New
A subtitle file or other file containing text that specifies the media element (< video > and < audio >)