本文主要是介绍JavaScript获取video的暂停、播放事件，并切换清晰度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文地址：http://blog.csdn.net/take_dream_as_horse/article/details/53422397
1、video是H5新增的视频标签，在项目上用的最多的功能就是：
（1）暂停的时候显示广告图片（图片有跳转链接）
（2）切换清晰度后，视频按切换前播放时间继续自动播放（或者暂停播放）
2、需要准备的资源（两段视频、一段广告视频、一张广告图片）
3、开始定义html元素
注:最好在每个video标签外定义一个div盒子，这样便于定位广告图片的位置或者自定义的操作按钮的位置
同时说明一下 video常用属性：controls:是否显示控制按钮 autoplay：是否加载完成自动播放
- <div class="video">
- <video id="media" controls="controls" width="600" height="400">
- <source src="video/video.mp4" type="video/mp4" />
- 您的浏览器版本太低,请及时更新
- </video>
- <a href="http://www.baidu.com" target="_blank" class="skip"></a>
-
- <a class="toggle-btn">切换至240p</a>
- </div>
4、开始定义js
- $('.skip').hide();
- var myVideo=document.getElementById("media");
- myVideo.addEventListener('play',function(){
- $('.skip').hide();
- });
- myVideo.addEventListener('pause',function(){
- $('.skip').show();
- })
-
-
- function toggleVideo(e){
-
- var curTime=e.currentTime();
- $("#media").attr("src","video/exo.mp4").attr("autoplay","true");
- e.currentTime=curTime
- }
-
- $('.toggle-btn').click(function(){
- toggleVideo(myVideo);
- })
注：这里有几点需要注意：
（1）myvideo是原生DOM对象，所以绑定事件为addEventListener()方法
（2）play为播放事件、pause为暂停事件
（3）curTime为切换清晰度时视频已经播放的时间
demo地址：https://github.com/chuanzaizai/h5-video-demo
这篇关于JavaScript获取video的暂停、播放事件，并切换清晰度的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
