用js来控制video播放器的代码实例教程
程序员文章站
2022-04-14 10:52:14
在文章开始前,先给大家看下效果图:
在文章开始,给大家先分享一下这个思路:
js来控制视频的播放:
1、所有的方法和属性都是由video这个dom元素来调用,如果换成其他的则不能实现
2、vide...
在文章开始前,先给大家看下效果图:
在文章开始,给大家先分享一下这个思路:
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>
上一篇: Goolgle的Python语言规范解析