html带有拖动功能的视频回放，视频需要自己导入代码中（插入视频地址即可）
<!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>
<div class="box">
<video src="images/test.mp4"></video>
<div class="control">
<a class="left icon-play"></a>
<div class="progress">
<div class="current"></div>
</div>
<a class="right icon-fullscreen"></a>
</div>
</div>
</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. 更新进度条（动态的设置进度条的div的宽度）
//拿到视频的总时长，再拿到当前的播放的时间，求一个百分比，再把这个百分比设为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>