摘要:在文章开始前,先给大家看下效果图:在文章开始,给大家先分享一下这个思路:

脚本宝典收集整理的这篇文章主要介绍了

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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过