HTML Video
There are many ways to play videos in HTML.
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>
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.
Use <embed> label
<embed> the role of tags is to embed multimedia elements in HTML pages.
The following HTML code displays the Flash video embedded in the web page:
Example
<embed src="intro.swf" height="200" width="200">
problem
HTML4 does not recognize
<embed>label. Your page failed validation.If the browser does not support Flash, the video will not 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.
Use the < object > tag
<object> 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.
Use the HTML5 < video > element
HTML5 <video> the tag defines a video or movie.
<video> 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.
<video>the element is not valid in older browsers.
The best HTML solution
Four different video formats are used in the following examples. HTML 5 <video> the element attempts to play the video in one of the mp4, ogg, or webm formats. If both fail, fall back to <embed> element.
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:
You have to convert the video to many different formats
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>
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.
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 >) |