video tag_html/css_WEB-ITnose

video

Through the video tag, we can abandon Flash, which has not been very popular recently, and play video files directly on the page. Video files are naturally the most semantic file format, but this element tag also supports audio and images.

In the past (and currently), we usually have to use cumbersome and ugly code like the following to place videos on the page, but this method requires the browser to have the Flash plug-in installed and support JavaScript:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344"  src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed></object>

HTML5 method:

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer><p>Try this page in Safari  4! Or you can<a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>instead.</p></video>

The video tag has the following common attributes:

Autoplay: used to set whether the video will automatically play after the page is loaded.
Src: Specify a file link or download path for the video. When the browser does not support the video tag or some kind of playback error occurs, it can be provided to the user for download.
Autobuffer: Used to set whether the video is automatically buffered; if set, the video will be automatically downloaded and buffered after the page is loaded. When the user clicks the play button, at least part of the video can be watched directly without waiting.
Poster: Used to set a background image of a "photo frame default image" nature for the video; it can be presented to the user when the video cannot be loaded and played normally.
Controls: Used to set whether to add control bars to the video, such as "play", "pause", etc.; the appearance of the control bar can be customized.
Loop: Used to set whether the video plays in a loop.
Width, Height: used to control the width and height of the video.
Although the video element has attracted much attention and has great potential, it will still take some time before it is fully supported by mainstream browsers; currently, if it is necessary to use the video tag, we can use a nondescript code combination similar to the following:

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png"><object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param value="http://www.youtube.com/demo/google_main.mp4"><param value="true"><param value="false"><embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed></object></video>

Concise version of HTML5 study notes (4): New elements: video, audio, meter, datalist, keygen, output

HTML video tag

HO8001: Each browser There are differences in using OBJECT elements and EMBED elements to embed Flash