我與寂寞對(duì)坐卷中，荒唐的是我比寂寞更寂寞崩溪。
最近項(xiàng)目接了個(gè)新需求 就是 在項(xiàng)目中(APP)視頻播放,不可以快進(jìn),但事可以后退,在后退成功的時(shí)候,還可以快進(jìn)到自然播放的最大時(shí)間處, 我翻遍所有的api, 發(fā)現(xiàn)并沒有這個(gè)api 也沒有解決方案,所以我覺定自己寫一個(gè)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');
}
}
//獲取視頻時(shí)間
//當(dāng)視頻可以播放的時(shí)候才可以獲取不然獲取不到
video.oncanplay = function (){
total = video.duration;
// console.log(total); //以秒為單位
spans[1].innerHTML = getTime(total);
// console.log(spans[1]);
}
//當(dāng)視頻播放
video.ontimeupdate = function(){
currenttime = video.currentTime;
spans[0].innerHTML = getTime(currenttime);
barWidth = processWidth * currenttime / total; // 當(dāng)前時(shí)間
endbarwidth = processWidth * currenttime / total; // 記錄最長時(shí)間
bar.style.width = barWidth + 'px';
}
//點(diǎn)擊進(jìn)度條下面的凹槽 也算是障眼法
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;
}
}
//視頻結(jié)束時(shí)
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寫的 后續(xù)我會(huì)將此代碼移到 Vue.js里面 可以關(guān)注一下 這個(gè)代碼貼過去就能用 , 如果覺的不好的話 可以自己寫一個(gè)
我的QQ: 2489757828 有問題的話可以一同探討
我的私人博客: 李繼玄
