很多站点都会使用到视频。HTML5提供了展示视频的标准。


Web站点上的视频

直到现在,仍然不存在一项旨在网页上显示视频的标准。

今天,大多数视频是通过插件(比如Flash)来显示的。然而,并非所有的浏览器都拥有同样的插件。

HTML5规定了一种通过video元素来包含视频的标准呢方法。


浏览器支持

#yyds干货盘点# 3.1 HTML5 Video(视频)_html5

Internet Explorer 9+,Firefox,Opera,Chrome和Safari支持<video>元素

注意​:Internet Explorer 8 或者更早的IE版本不支持<video>元素


HTML5(视频)- 如何工作

如需在HTML5中显示视频,您所有需要的是:

实例

<video width="666" height="444" controls>
<source src=" http://v6-dy.ixigua.com/d0641a4d8624b2125cab6f1b64c2a8e9/61de9667/video/tos/cn/tos-cn-ve-15/20b6ed92c81c451bb8f330f0659572c0/?a=1128&br=1136&bt=1136&cd=0%7C0%7C0&ch=0&cr=0&cs=0&dr=0&ds=3&er=&ft=teqIn88-oU-DYlnh7TQ_plXxuhsdGTo-HqY&l=202201121550350101940502110D236B2B&lr=&mime_type=video_mp4&net=5&pl=0&qs=0&rc=M3VkO2ZzbHN1MzMzZ2kzM0ApNDw5NTU8ZTs2N2g4OmY0O2doY2Vkc2A2cWFgLS02LTBzczRgYTEzLS5hMzBjNTYwXjQ6Yw%3D%3D&vl=&vr="
type="video/mp4" >
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

#yyds干货盘点# 3.1 HTML5 Video(视频)_ide_02

<video>元素提供了播放、暂停和音量控件来控制视频。

同时<video>元素也提供了width和height属性控制视频的尺寸。如果设置了高度和宽度,所需要的视频空间也会在页面加载时保留。如果没有设置这些属性,浏览器不知道视频的大小,浏览器就不能加载时博阿留特定的空间,页面就会根据原始视频的大小而改变。

<video>与</video>标签之间插入的内容是提供给不支持video元素的浏览器显示的.

<video>元素支持多个<source>元素。<source>元素可以连接不同的视频文件。

浏览器将使用第一个可识别的格式:


视频格式与浏览器的支持

当前,<video>元素支持三种视频格式:MP4,WebM和Ogg:

浏览器

MP4

WebM

Ogg


Internet Explorer





×



×



Chrome









Firefox










Safari





×



×



Opera



(从 Opera 25 起)






MP4 :带有H.264视频编码和AAC音频编码的MPEG 4文件

WebM : 带有VP8视频编码和Vorbis音频编码的WebM文件

Ogg:带有Theora视频编码和Voribs音频编码的Ogg文件


视频格式


格式​​



MIME-type



MP4



Video/mp4



WebM



Video/webm



Ogg



Video/ogg



HTML5<video>-使用DOM进行控制

HTML5<video>和<audio>元素同样拥有方法、属性和时间。

<video>和<audio>元素的方法,属性和时间可以使用JavaScript进行控制

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或配置。其中DOM事件能够通知您,比如说,<video>元素开始播放、已暂停、已停止、等等

例中最简单的方法,向我们演示了如何使用<video>元素,读取并设置属性,以及如何调用方法。

实例 1

​为视频创建简单的播放/暂停以及调整尺寸控件:


<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="222">
<source src="http://v6-dy.ixigua.com/d0641a4d8624b2125cab6f1b64c2a8e9/61de9667/video/tos/cn/tos-cn-ve-15/20b6ed92c81c451bb8f330f0659572c0/?a=1128&br=1136&bt=1136&cd=0%7C0%7C0&ch=0&cr=0&cs=0&dr=0&ds=3&er=&ft=teqIn88-oU-DYlnh7TQ_plXxuhsdGTo-HqY&l=202201121550350101940502110D236B2B&lr=&mime_type=video_mp4&net=5&pl=0&qs=0&rc=M3VkO2ZzbHN1MzMzZ2kzM0ApNDw5NTU8ZTs2N2g4OmY0O2doY2Vkc2A2cWFgLS02LTBzczRgYTEzLS5hMzBjNTYwXjQ6Yw%3D%3D&vl=&vr="
type="video/mp4">
您的浏览器不支持Video标签。
</video>
</div>

<script>
var myVideo=document.getElementById("video1");
function playPause(){
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig(){
myVideo.width=270;
}
function makeSmall(){
myVideo.width=180;
}
function makeNormal(){
myVideo.width=222;
}
</script>
</body>


#yyds干货盘点# 3.1 HTML5 Video(视频)_html5_03

#yyds干货盘点# 3.1 HTML5 Video(视频)_ide_04

#yyds干货盘点# 3.1 HTML5 Video(视频)_ide_05


#yyds干货盘点# 3.1 HTML5 Video(视频)_3d_06

上面实例调用了俩个方法:play()和pause()。它同时使用了俩个属性:paused和width。


HTML5 Video标签

标签

描述


<video>



定义一个视频


<source>


定义多种媒体资源,比如<video>和<audio>



<track>


定义在媒体播放器文本轨迹



<video>标签的属性



属性





描述



autoplay



autoplay



如果出现该属性,则视频在就绪后马上播放



controls



controls



如果出现该属性,则向用户显示插件,比如播放按钮。



height



pixels



设置视频播放器的高度。



loop



loop



如果出现该属性,则当媒介文件完成播放后再次开始播放。



preload



preload



如果出现该属性,则视频在页面加载时进行加载,并预备播放。



src



url



要播放的视频的URL。



width



pixels



设置视频播放器的宽度。