我与寂寞对坐，荒唐的是我比寂寞更寂寞。
最近项目接了个新需求 就是 在项目中(APP)视频播放,不可以快进,但事可以后退,在后退成功的时候,还可以快进到自然播放的最大时间处, 我翻遍所有的api, 发现并没有这个api 也没有解决方案,所以我觉定自己写一个video控件
<!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="./font_m6b36j857h/demo.css">
<link rel="stylesheet" href="./font_m6b36j857h/iconfont.css">
<style>
.container {
position: relative;
width: 640px;
height: 360px;
border: 1px solid red;
margin: 100px auto;
}
.container video {
width: 100%;
height: 100%;
}
.container .control {
position: absolute;
left: 20px;
bottom: 10px;
width: 600px;
height: 30px;
background: rgba(0, 0, 0, .5)
}
.control .switch {
position: absolute;
left: 10px;
top: 5px;
}
.control .icon {
cursor: pointer;
color: #fff;
font-size: 20px;
}
.control .process {
position: absolute;
left: 36px;
top: 7px;
width: 350px;
height: 18px;
border-radius: 9px;
background-color: #555;
overflow: hidden;
cursor: pointer;
}
.control .process .bar {
position: absolute;
left: 0;
top: 0;
width: 0px;
height: 100%;
background-color: #fff;
}
.control .time {
position: absolute;
right: 60px;
top: 6px;
color: #fff;
}
.control .sound {
position: absolute;
right: 33px;
top: 6px;
}
.control .full {
position: absolute;
right: 6px;
top: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<video src="https://act.mcake.com/fangli/2018/pc/zhou-nian/video/zhounian-7.mp4" poster="./images/poster.jpg"></video>
<div class="control">
<i class="icon icon-play switch" id="switch">123</i>
<div class="process">
<div class="bar"></div>
</div>
<div class="time">
<span>00:00:00</span> /
<span>00:00:00</span>
</div>
<i class="icon icon-sound sound">123</i>
<i class="icon iconfont full" id="full">123</i>
</div>
</div>
<script>
var btn = document.querySelector('#switch');
var video = document.querySelector('video');
var spans = document.querySelectorAll('.control .time span');
var process = document.querySelector('.process');
var bar = document.getElementsByClassName('bar')[0];
var full = document.querySelector('#full');
// console.log(spans[0]);
var total = 0;
var processWidth = process.offsetWidth;
// console.log(processWidth);
var currenttime = undefined;
var endbarwidth = undefined;
var num = 1;
//视频开始和暂停切换
btn.onclick = function (){
// console.log(video.paused);
if(video.paused) {
video.play();
this.classList.remove('icon-play');
this.classList.add('icon-pause');
} else {
video.pause();
this.classList.remove('icon-pause');
this.classList.add('icon-play');
}
}
//获取视频时间
//当视频可以播放的时候才可以获取不然获取不到
video.oncanplay = function (){
total = video.duration;
// console.log(total); //以秒为单位
spans[1].innerHTML = getTime(total);
// console.log(spans[1]);
}
//当视频播放
video.ontimeupdate = function(){
currenttime = video.currentTime;
spans[0].innerHTML = getTime(currenttime);
barWidth = processWidth * currenttime / total; // 当前时间
endbarwidth = processWidth * currenttime / total; // 记录最长时间
bar.style.width = barWidth + 'px';
}
//点击进度条下面的凹槽 也算是障眼法
process.onclick = function (e) {
num += 1;
if ( num == 2) {
localStorage.setItem('endbarwidth', endbarwidth);
}
console.log(e.offsetX);
var losW = undefined;
if (localStorage.getItem('endbarwidth')) {
losW = parseFloat(localStorage.getItem('endbarwidth'))
}
console.log(losW);
if (e.offsetX < losW) { //
video.currentTime = total * e.offsetX / processWidth;
} else if (e.offsetX > barWidth) {
return;
} else {
video.currentTime = total * e.offsetX / processWidth;
}
}
//视频结束时
video.onended = function (){
video.currentTime = 0;
btn.classList.remove('icon-pause');
btn.classList.add('icon-play');
}
//全屏开启
full.onclick = function(){
if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
} else if (video.mozRequestFullScreen){
video.mozRequestFullScreen();
} else if (video.msRequestFullScreen) {
video.msRequestFullScreen();
} else if (video.oRequestFullScreen){
video.oRequestFullScreen();
} else {
video.requestFullScreen();
}
}
function getTime(time){
var hours = Math.floor(time%86400/3600);
var minutes = Math.floor(time%86400%3600/60);
var seconds = Math.floor(time%60);
// console.log(seconds);
hours = hours > 10 ? hours : '0' + hours;
minutes = minutes > 10 ? minutes : '0' + minutes;
seconds = seconds > 10 ? seconds : '0' + seconds;
var str = '';
str = hours + ':' + minutes + ':' + seconds;
// console.log(str);
return str;
}
</script>
</body>
</html>
这就是普通js写的 后续我会将此代码移到 Vue.js里面 可以关注一下 这个代码贴过去就能用 , 如果觉的不好的话 可以自己写一个
我的QQ: 2489757828 有问题的话可以一同探讨
我的私人博客: 李继玄
