HTML5 Video(video)

Video tag introduction

Most users have installed the Flash plug-in (in fact, about 95% of Internet users have some version of Flash installed), but HTML 5 Proponents are pushing for an open, plug-in-free video standard. This is the idea brought about by HTML 5's new

Until now, there was no standard for displaying videos on web pages.

Browser support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.

Note: Internet Explorer 8 or earlier versions of IE do not support the <video> element.

Usage of Video tag

Video tag contains several attributes such as src, poster, preload, autoplay, loop, controls, width, height, etc. , and an internal tag <source>. In addition to the <source> tag, the Video tag can also contain content returned when the specified video cannot be played.

(1) src attribute and poster attribute

You can imagine what the src attribute is used for. Like the <img> tag, this attribute is used to specify the address of the video. The poster attribute is used to specify a picture to be displayed (preview picture) when the current video data is invalid. Invalid video data may mean that the video is loading, the video address may be incorrect, etc.

(2) preload attribute

This attribute can also be understood through its name. This attribute is used to define whether the video is preloaded. . The attribute has three optional values: none, metadata, and auto. If this attribute is not used, the default is auto.

None: No preloading. Using this attribute value, it is possible that the page author believes that the user does not expect this video, or to reduce the HTTP request.

Metadata: Partially preloaded. Using this attribute value means that the page author believes that the user does not expect this video, but provides the user with some metadata (including dimensions, first frame, track list, duration, etc.).

Auto: All preloaded.

(3) autoplay attribute

is another attribute whose use can be known by looking at its name. The Autoplay attribute is used to set whether the video plays automatically. It is a Boolean attribute. When it appears, it means automatic playback. If it is removed, it means not automatic playback.

Note that the values ​​of Boolean attributes in HTML are not true and false. The correct usage is to use this attribute in a tag to indicate true. At this time, the attribute either has no value or its value is equal to its name (here, autoplay is <video autoplay /> or <video autoplay=" autoplay" />); and not using this attribute in the tag means false (not autoplaying here is <video />).

(4) loop attribute

At a glance, the loop attribute is used to specify whether the video is played in a loop, which is also a Boolean attribute.

(5) controls attribute

The Controls attribute is used to indicate to the browser that the page author did not use a script to generate a playback controller, and the browser needs to enable its own playback control. column.

#The control bar must include playback pause control, playback progress control, volume control, etc.

The default playback control bar of each browser is different in the interface. Due to a weird problem with my browser, the Video tags of Firefox and Safari are not working properly, so I can only find screenshots of these two online.

(6) The width attribute and the height attribute

are common attributes of tags. Needless to say more about this.

Video formats and browser support

Currently, the <video> element supports three video formats: MP4, WebM, and Ogg:

Browser                                                                                                                 NO Chrome                                                                                                                                                                                                                                                                                                                              YES YES MP4 = MPEG 4 file with H.264 video encoding and AAC audio encoding WebM = WebM file with VP8 video encoding and Vorbis audio encoding

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="http://www.w3school.com.cn/example/html5/mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
 myVideo.play(); 
else 
 myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=600; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body> 
</html>