脚本宝典收集整理的这篇文章主要介绍了js实例教程-用js来控制video播放器的代码实例教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
在文章开始，给大家先分享一下这个思路：
js来控制视频的播放：
1、所有的方法和属性都是由video这个dom元素来调用，如果换成其他的则不能实现
2、video.paused==true
3、video.play();
4、video.pause();
5、video.duration;video.currentTime();
6、video.ontimeUpdate=function()
7、video.webkitRequestFullScreen();
代码部分，包含注释：
<!DOCTYPE htML> <html lang="en"> <head> <;meta charset="UTF-8"> <meta name="viewport" content="width=device-width, inITial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=Edge"> <title>Document</title> <link rel="stylesheet" href="./css/font-awesome.min.css"> <style> * { margin: 0; padding: 0; } body { background-color: #000; } .box { width: 800px; margin: 100px auto; border: 1px solid #fff; } .control { width: 100%; height: 50px; background: #fff; display: flex; border-top: 1px solid #fff; } .control .right, .control .left{ flex-basis: 50px; background-color: #000; color: #fff; text-align: center; line-height: 50px; font-Size: 20px; } .control .PRogress { flex: 1; } .control .current { width: 0%; height: 50px; background-color: gray; } </style> </head> <body> <p class="box"> <video src="./movie/bglb.mp4"></video> <p class="control"> <a class="left icon-play"></a> <p class="progress"> <p class="current"></p> </p> <a class="right icon-fullscreen"></a> </p> </p> </body> </html> <script> //拿到video的dom元素 VAR video = document.querySelector("video"); //1. 点击暂停播放按钮的操作 document.querySelector(".left").onclick = function() { //判断当前是处于暂停还是播放状态，如果是暂停状态，就播放， 如果是播放状态， 就暂停 if (video.paused == true) { video.play(); this.classList.add("icon-pause"); this.classList.remove("icon-play"); } else { video.pause(); this.classList.remove("icon-pause"); this.classList.add("icon-play"); } } //2. 更新进度条（动态的设置进度条的p的宽度） //拿到视频的总时长，再拿到当前的播放的时间，求一个百分比，再把这个百分比设为css的width的值 //当视频播放， 视频的进度更新时，就会调用 video.ontimeupdate = function() { var percent = video.currentTime / video.duration * 100 + "%"; console.LOG(percent); document.querySelector(".current").style.width = percent; } //3. 点击进度条，更新进度 document.querySelector(".progress").onclick = function(target) { //拿到进度条的宽度 var width = this.offsetWidth; //拿到当前点击位置的x坐标 var x = target.offsetX; //比如说我的视频的总时长是60分钟， 当前时间 60 * x/width video.currentTime = x / width * video.duration; } //4. 全屏的功能的实现 document.querySelector(".right").onclick = function() { //进入全屏 video.webkitRequestFullScreen(); } </script>
在文章开始前，先给大家看下效果图：
在文章开始，给大家先分享一下这个思路：
js来控制视频的播放：
1、所有的方法和属性都是由video这个dom元素来调用，如果换成其他的则不能实现
2、video.paused==true
3、video.play();
4、video.pause();
5、video.duration;video.currentTime();
6、video.ontimeUpdate=function()
7、video.webkitRequestFullScreen();
代码部分，包含注释：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/font-awesome.min.css"> <style> * { margin: 0; padding: 0; } body { background-color: #000; } .box { width: 800px; margin: 100px auto; border: 1px solid #fff; } .control { width: 100%; height: 50px; background: #fff; display: flex; border-top: 1px solid #fff; } .control .right, .control .left{ flex-basis: 50px; background-color: #000; color: #fff; text-align: center; line-height: 50px; font-size: 20px; } .control .progress { flex: 1; } .control .current { width: 0%; height: 50px; background-color: gray; } </style> </head> <body> <p class="box"> <video src="./movie/bglb.mp4"></video> <p class="control"> <a class="left icon-play"></a> <p class="progress"> <p class="current"></p> </p> <a class="right icon-fullscreen"></a> </p> </p> </body> </html> <script> //拿到video的dom元素 var video = document.querySelector("video"); //1. 点击暂停播放按钮的操作 document.querySelector(".left").onclick = function() { //判断当前是处于暂停还是播放状态，如果是暂停状态，就播放， 如果是播放状态， 就暂停 if (video.paused == true) { video.play(); this.classList.add("icon-pause"); this.classList.remove("icon-play"); } else { video.pause(); this.classList.remove("icon-pause"); this.classList.add("icon-play"); } } //2. 更新进度条（动态的设置进度条的p的宽度） //拿到视频的总时长，再拿到当前的播放的时间，求一个百分比，再把这个百分比设为css的width的值 //当视频播放， 视频的进度更新时，就会调用 video.ontimeupdate = function() { var percent = video.currentTime / video.duration * 100 + "%"; console.log(percent); document.querySelector(".current").style.width = percent; } //3. 点击进度条，更新进度 document.querySelector(".progress").onclick = function(target) { //拿到进度条的宽度 var width = this.offsetWidth; //拿到当前点击位置的x坐标 var x = target.offsetX; //比如说我的视频的总时长是60分钟， 当前时间 60 * x/width video.currentTime = x / width * video.duration; } //4. 全屏的功能的实现 document.querySelector(".right").onclick = function() { //进入全屏 video.webkitRequestFullScreen(); } </script> 觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-用js来控制video播放器的代码实例教程全部内容，希望文章能够帮你解决js实例教程-用js来控制video播放器的代码实例教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。