HTML5 <video> tag supports 3 commonly used video formats:
1. Ogg = Ogg file with Theora video encoding and Vorbis audio encoding;
2. MPEG4 = MPEG 4 file with H.264 video encoding and AAC audio encoding;
3. WebM = WebM file with VP8 video encoding and Vorbis audio encoding.
Nowadays, mainstream browsers have different support for video formats. I believe that the day HTML5 is officially released will support more video formats, bringing many benefits to developers and users.
Let’s talk about the use of HTML5 video tag videos. If you need to display videos in the browser, all you need is to copy the following code:
<video src=movie.ogg width=320 height=240 controls=controls>
Your browser does not support the video tag.
</video>
control properties for adding play, pause, and volume controls. It is also a good idea to include Width width and height properties. The content inserted between <video> and </video> is displayed by browsers that do not support video elements.
The above code uses an Ogg file that works for Firefox, Opera, and Google Chrome. To ensure that it is suitable for Safari browser, the video file must be in MPEG4 format. IE8 does not support HTML5 <video> tags, and IE9 supports this tag, but must also use MPEG4 format.
The video element allows multiple source elements. The source element can link video files in different formats. The browser detects and uses the first recognizable format, the code is as follows:
<video width=320 height=240 controls=controls>
<source src=movie.ogg type=video/ogg>
<source src=movie.mp4 type=video/mp4>
Your browser does not support the video tag.
</video>
The following are the common properties of the <video> tag:
| property | value | describe |
autoplay | autoplay | If this property appears, the video will play immediately after it is ready. |
Controls | Controls | If this property appears, a control is displayed to the user, such as a play button. |
height | pixels | Set the height of the video player. |
loop | loop | If this property appears, playback starts again when the media file has finished playing. |
preload | preload | If this property appears, the video is loaded when the page is loaded and ready to be played. If autoplay is used, this property is ignored. |
src | url | URL of the video to play. |
width | pixels | Sets the width of the video player. |
The emergence of HTML5 video tag video has greatly improved the user's experience of the web and will make it more convenient for users to browse and use.