HTML5 video label video and html5 video

HTML5 video label video and html5 video

At this stage, the most reliable and commonly used way to embed videos in webpages is to use Flash. By using the object and embed tags, you can play swf, flv, and other video files in a browser, but the premise is that the browser must install a third-party plug-in: Adobe Flash Player. The advent of HTML5 has changed the fact that WEB developers can easily load video files without any third-party plug-ins.

View demo

In the future, the WEB can load video files on any terminal, and any platform only needs to use the HTML5 <video> tag.

Video tag in WEB

HTML5 defines a new element to specify a standard way to insert a video file to a web page: <video> tag. You can use the video tag to control the video playback and stop, loop playback, and video size. For more information, see the table below.

Attribute	Value	Description
Autoplay	True | false	If it is true, the video will be played immediately after it is ready.
Controls	True | false	If it is true, the control, such as the play button, is displayed to the user.
Height	Pixels	Set the height of the video player.
Loop	True | false	After playing the video, start playing again, that is, loop playback.
Poster	Url	When the video does not respond or the buffer is insufficient, the attribute value is linked to an image. The image will be displayed in a certain proportion.
Src	Url	The url of the video to be played. It is better to use the sub-element <source>.
Width	Pixels	Set the width of the video player.

Currently, browsers that support <video> tags include:

IE9, Firefox, Opera, Chrome, and Safari both support <video> labels.

Note: The <video> label is not supported in IE8 or earlier versions.

How to use Video

To play a video in HTML5, insert the following code into the body:

Because the old browsers and Internet Explorer do not support the <video> element, considering compatibility, we must find a solution that supports Flash files for these browsers. Unfortunately, like HTML 5 audio, video file formats are involved. Firefox and Safari/Chrome support methods are different. Therefore, if you want to use HTML 5 videos at this time, you need to create three video versions.

OGG, MP4, FLV/SWF

<Video width = "320" height = "240" controls> <! -- Firefox --> <source src = "mv.ogg" type = "video/ogg"/> <! -- Safari/Chrome --> <source src = "mv.mp4" type = "video/mp4"/> <! -- If the browser does not support video tags, use flash --> <embed src = "6, you can view the video in full screen; 4. You need to understand why IE loads the Flash file, the reason is that IE cannot interpret the <video> element. However, if the browser supports it, it will expect to load the appropriate file