用js来控制video播放器的代码实例教程
程序员文章站
2022-07-01 22:40:11
在文章开始前，先给大家看下效果图：
在文章开始，给大家先分享一下这个思路：
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> 下一篇： 电脑端最佳的电子书EPUB阅读器