How to insert a video in an HTML Web page __html

Now if you want to use a video tag on a page, you need to consider three things, support Ogg Theora or VP8 (if it's not an accident) (Opera, Mozilla, Chrome), support H.264 (Safari, IE 9, Chrome), are not supported (IE6, 7, 8). Okay, now let's get to the technical level of the HTML 5 video, including the use of video tags, the media properties and methods that the object can use, and media events.


Use of video labels

The video label contains SRC, poster, preload, AutoPlay, loop, controls, width, height, and several attributes, as well as an internal use of the label <source>. In addition to the <source> tag, the video label can include content that is returned when the specified videos cannot be played.


(1) SRC attribute and poster property


You can imagine what SRC attributes are for. As with label, this property is used to specify the address of the video. The poster property is used to specify a picture that is displayed when the current video data is not valid (preview). Invalid video data may be the video is loading, may be video address errors, and so on.
<video width= "658" height= "444" src= "Http://www.youname.com/images/first.mp4" poster= Images/first.png "autoplay=" AutoPlay "></video>





(2) Preload property


This property can also be used to understand the use of a name, which defines whether the video is preloaded. Property has three selectable values: None, metadata, auto. If you do not use this property, the default is auto.
<video width= "658" height= "444" src= "Http://www.youname.com/images/first.mp4" poster= Images/first.png "autoplay=" AutoPlay "preload=" None "></video>


None: Pre-loading is not done. Using this property value, it may be the page-making author that the user does not expect this video, or reduce the HTTP request.


Metadata: Partial preload. Use this property value to represent the page-making author that the user does not expect this video, but gives the user some metadata (including dimensions, first frame, track list, duration, and so on).


Auto: Preload all.


(3) AutoPlay property


Another attribute to see the use of a name. The AutoPlay property is used to set whether the video is played automatically, and is a Boolean property. When it appears, it automatically plays, and it is removed to indicate that it does not play automatically.
<video width= "658" height= "444" src= "Http://www.youname.com/images/first.mp4" poster= Images/first.png "autoplay=" AutoPlay "preload=" None "></video>


Note that the value of the Boolean property in HTML is not true and false. The correct usage is to use this property in the label to represent true, at which point the property either has no value or its value is equal to his name (here, AutoPlay is <video autoplay/> or <video autoplay= "autoplay"/> Instead of using this property in the label to represent false (AutoPlay is not shown here as <video/>).


(4) Loop property
<video width= "658" height= "444" src= "Http://www.youname.com/images/first.mp4" poster= Images/first.png "autoplay=" AutoPlay "loop=" loop "></video>

At a glance, the Loop property is used to specify whether the video is looping and is also a Boolean property.


(5) Controls Property
<video width= "658" height= "444" src= "Http://www.youname.com/images/first.mp4" poster= Images/first.png "autoplay=" AutoPlay "preload=" None "controls=" Controls "></video>





The controls property is used to indicate to the browser that the page author does not use a script to generate the playback controller, and that the browser enables its own playback control bar.


Control bar should include playback pause control, playback progress Control, volume control, and so on.


The default playback control bar for each browser is different on the interface. Because of my browser's bizarre problems, Firefox and Safari video tags are not normal, so the two can only find screenshots on the Internet.


(6) Width property and Height property


is a common attribute of the label, this does not have to say more.


(7) Source label
<video width= "658" height= "444" poster= "http://www.youname.com/images/first.png" autoplay= "AutoPlay" None "controls=" Controls "><source src=" HTTP://WWW.YOUNAME.COM/IMAGES/FIRST.OGV "/><source src=" http:// Www.youname.com/images/first.ogg "/></video>





The source label is used to give the media (because the audio tag can also contain this label, so here use the media, not the video) to specify multiple options (the browser can end up with only one) file address, which can only be used if the media label is not using the SRC attribute.


The browser detects, in the order of the source label, whether the video specified by the label can be played (either the video format is not supported, the video does not exist, and so on), and if it cannot be played, change to the next. This method is used more than compatible with different browsers. The source label itself does not represent any meaning and cannot appear alone.


This label contains SRC, type, media three properties.


SRC attribute: Used to specify the address of the media, as with the video label.


Type attribute: Used to describe the type of media specified by the SRC attribute to help the browser decide whether to support media formats of this type before acquiring the media.


Media properties: Used to describe the medium in which the media is used, without setting the default value of all, to support all media. Do you think of the media properties of <style> tags? Same as the same.


(8) A complete example
<video width= "658" height= "444" poster= "http://www.youname.com/images/first.png" autoplay= "AutoPlay" None "controls=" Controls "><source src=" HTTP://WWW.YOUNAME.COM/IMAGES/FIRST.OGV "/><source src=" http:// Www.youname.com/images/first.ogg "/></video>


This code defines a video in the page, and the preview of this video is the poster property value, which displays the browser's default media control bar, preload the video's metadata, and loops playback, with a width of 900 pixels and a height of 240 pixels.


The first Choice video address is the SRC attribute value of the first source label, the video category is Ogg video, the video codec is Theora, the audio codec is Vorbis, the playback medium is the display; the second choice video address is no longer tiring. If you also want to be compatible with IE, you can add a Flash Player tab set to the last source tag, or use a bit of JavaScript code.



<iframe> and <frame> differences
1, frame can not be separated from the frameset alone, the IFRAME can


2, frame can not be placed in the body, otherwise not normal display


Frame cannot be used with body at the same time


<!--<body>-->
<frameset rows= "50%,*" >
<frame name= "frame1" src= "test1.htm"/>
<frame name= "frame2" src= "test2.htm"/>
</frameset>
<!--</body>-->
An IFRAME can be used with the body at the same time
<body>
<frameset>
<iframe height= "30%" name= "frame1" src= "test1.htm"/>
<iframe height= "Name=" "Frame2" src= "test2.htm"/>
</frameset>
</body>


3, nested in the frameset of the IFRAME must be placed in the body, not nested in the frameset of the IFRAME can be used freely


4, the height of the frame can only be controlled by frameset; The IFRAME can control itself and cannot be controlled by frameset.


Difference:


Frame is the frame of the entire page, an IFRAME is an embedded Web page element, or an inline frame that can be used to embed an HTML document in another HTML display.


The biggest difference is that the content embedded <Iframe> contained in the Web page is a whole, while <Frame> contains the content is independent individual, can be displayed independently.


In addition, an IFRAME can display the same content more than once in a page without having to repeat the code for that piece of content.


5, the IFRAME can be placed in the form. Frame is not.


<table>


<tr>


<td><iframe id= "src=" "></iframe></td><td></td>


</tr>


</table>


6, the IFRAME is the active frame, and the frame is a non-active frame


The IFRAME is more flexible, does not need frame so much attention, and put the location can be set itself.


The IFRAME is embedded, more flexible, but there is also a bad place, is the location in different browsers and resolution may be different, and sometimes will be a good page to make deformation.


An IFRAME is a child frame in a Web page, a parent-child relationship between two pages.


An IFRAME is a floating frame that adds a page to your page.


Frame used to cut a page horizontally or vertically,<iframe> used to insert a rectangular small window into the page.


Frame is a page that divides a page into multiple pages. It's going to have a frameset page frameset.