---

文章目录

• video 元素
  • 方法
  • 属性
  • 事件
• 如何在 video 元素上捕获事件

---

Html5 的扩展极大的方便了web开发.

比如视频播放,在Html5 之前,全部依赖 flash / 银光 这样的插件.

video 元素

Html5 的 video 元素扩展出来非常多的方法,属性,事件 等.
我们可以直接在此控件上播放,暂停 等操作.

现在，Safari 3以上、Firefox 4以上、Opera 10以上，以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持

表现形式:

<video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>
你的浏览器貌似不支持video 元素 %>_<%
</video>

如果不支持 video 元素时,会把video 中间的内容显示出来.

通过source元素来为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放，浏览器的选择顺序为代码中的书写顺序，它会从上往下判断自己对该播放格式是否支持，直到选择到自己支持的播放格式为止

source元素的使用方法如下所示

<video>
<!-- 在ogg theora格式、Quicktime格式与mp4格式之间，挑选自己支持的播放格式-->
<source src='yijiebuyi.ogv' type='video/ogg; codecs="thora, vorbis"'>
<source src='yijiebuyi.mov' type="'video/quicktime'>
</video>

---

source元素具有几个属性：src属性是指播放媒体的URL地址；
type表示媒体类型，甚属性值为播放文件的MIME类型，该属性中的codes参数表示所使用的媒体编码格式
type属性是可选属性，但最好不要省略type属性，否则浏览器会在从上往下选择时无法判断自己能不能播放而先行下载一小段视频（或音频）数据，这样就有可能浪费带宽和时间了

---

方法

1. play()
2. pause()
3. load()

属性

1、src内容属性
指定所要嵌入视频、文档的URL。
2、poster内容属性
当视频能够播放时，用于指定代表视频的图像的URL。
3、preload内容属性
preload内容属性用于指定是否提前下载，怎样提前下载视频数据，给用户代理相应的提示。
【preload属性的可选值：】
none：在播放视频之前不做下载
metadata：只下载视频的meta信息部分。Meta信息中收集了关于视频的长度、视频的起始祯的图像、视频的长度等信息
auto：尽可能提前下载视频
autoplay：preload属性将无效
4、autoplay内容属性
如果视频可以使用，马上播放视频，属于逻辑属性
5、mediagroup内容属性
使多个video或者audio元素集合化
6、loop内容属性
循环播放，属于逻辑属性
7、muted内容属性
关闭视频的声音通道（静音），属于逻辑属性
8、controls内容属性
用于表示能够操作视频播放与停止的用户界面，属于逻辑属性
9、width内容属性
表示视频的横宽。
10、height内容属性
表示视频的纵高

事件

1. play
2. pause
3. progress
4. error

如何在 video 元素上捕获事件

我们有这样一个需求:

当点击视频时,请求服务器接口,视频播放次数+1

加入我们有如下的video 元素

<video controls height="300" width="100%" id="myvideo" >
<source src="yijiebuyi.mp4" type="video/mp4" />
</video>

javascript 代码如下:

var init_num=0;
var myvideo=document.getElementById('myvideo');
            myvideo.setAttribute("src",videoUrl);
           
            myvideo.addEventListener('play',function(){
                if(init_num==0){
                    init_num++;
                    videoPlayNum(videoID);
                }
 });

addEventListener 给 myvideo 元素添加一个事件监听,监听 play 事件,当点击播放按钮时,会触发此监听函数,然后执行回调函数.

if(init_num==0) 这个逻辑是防止点击 播放/暂停 按钮,每次都统计,其实我们只需要在页面加载渲染后,第一次点击按钮时统计.

videoPlayNum(videoID) 此方法是请求服务器,提交统计数据

出自:HTML5 video 元素及获取视频播放事件