您的位置: 首页  >  文章  >  JavaScript获取video的暂停、播放事件，并切换清晰度

JavaScript获取video的暂停、播放事件，并切换清晰度

分类: 文章 • 2024-06-10 17:11:16

原文地址：http://blog.****.net/take_dream_as_horse/article/details/53422397

1、video是H5新增的视频标签，在项目上用的最多的功能就是：

（1）暂停的时候显示广告图片（图片有跳转链接）

（2）切换清晰度后，视频按切换前播放时间继续自动播放（或者暂停播放）


2、需要准备的资源（两段视频、一段广告视频、一张广告图片）

JavaScript获取video的暂停、播放事件，并切换清晰度

JavaScript获取video的暂停、播放事件，并切换清晰度JavaScript获取video的暂停、播放事件，并切换清晰度

3、开始定义html元素

注:最好在每个video标签外定义一个div盒子，这样便于定位广告图片的位置或者自定义的操作按钮的位置

    同时说明一下 video常用属性：controls:是否显示控制按钮 autoplay：是否加载完成自动播放

[html] view plain copy
  1. <div class="video">  
  2.         <video id="media"  controls="controls"   width="600" height="400">  
  3.             <source src="video/video.mp4" type="video/mp4" />  
  4.             您的浏览器版本太低,请及时更新  
  5.         </video>  
  6.         <a href="http://www.baidu.com" target="_blank" class="skip"></a>  
  7.          <!-- 切换清晰度 -->  
  8.         <a class="toggle-btn">切换至240p</a>  
  9.     </div>  
JavaScript获取video的暂停、播放事件，并切换清晰度
JavaScript获取video的暂停、播放事件，并切换清晰度

4、开始定义js

[javascript] view plain copy
  1. $('.skip').hide();  
  2. var myVideo=document.getElementById("media");  
  3. myVideo.addEventListener('play',function(){  
  4.     $('.skip').hide();     
  5. });  
  6. myVideo.addEventListener('pause',function(){  
  7.     $('.skip').show();  
  8. })  
  9.   
  10.       //切换清晰度  
  11.       function toggleVideo(e){  
  12.         //当前播放时间  
  13.         var curTime=e.currentTime();  
  14.         $("#media").attr("src","video/exo.mp4").attr("autoplay","true");  
  15.         e.currentTime=curTime  
  16.       }  
  17.   
  18.       $('.toggle-btn').click(function(){  
  19.         toggleVideo(myVideo);  
  20.       })  

注：这里有几点需要注意：

（1）myvideo是原生DOM对象，所以绑定事件为addEventListener()方法

（2）play为播放事件、pause为暂停事件

（3）curTime为切换清晰度时视频已经播放的时间

demo地址：https://github.com/chuanzaizai/h5-video-demo




相关推荐