karlew > HTML5特效 > 常用HTML5 video属性和事件

常用HTML5 video属性和事件

5-19 9,410 views

在网页开发中，有时需要监测插入视频是否播放结束，从而触发相应事件，可使用ended，通过以下代码实现：

  1. var myVid = document.getElementById("video");
  2. myVid.addEventListener("ended", function(){
  3.     //播放完成后触发事件
  4. }, false)

 

监测视频是否加载完成，可使用loadedmetadata，如：

  1. myVid.addEventListener("loadedmetadata", function()
  2.   {
  3.     //加载完成后执行代码
  4.   }
  5. );

 

监测视频播放进度变化，可使用ontimeupdate，如：

  1. myVid.addEventListener("timeupdate", function()
  2.   {
  3.     //进度变化时执行代码，可配合currentTime使用
  4.   }
  5. );

 

currentTime用于设置或返回视频播放进度，利用currentTime可实现快进快退：

  1. myVid.currentTime+=5; //快进5秒
  2. myVid.currentTime-=5; //快退5秒

 

播放和暂停：

  1. myVid.play();; //播放
  2. myVid.pause(); //暂停

 

视频边加载边播放：
设置video标签的属性 x-webkit-airplay="true"

版权属于: karlew

原文地址: https://www.karlew.com/archives/481

转载时必须以链接形式注明原始出处及本声明。

1 条评论

欢迎留言