自制video播放器
w3c來源css
兼容問題
<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的html
<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式web
api屬性
controls
controlslist="nodownload" 無下載按鈕
playsinline x5-playsinline webkit-playsinline 解決默認全屏ajax
autoplay
preload屬性設置或返回是否在頁面加載後當即加載音頻/視頻：auto|metadata|nonechrome
auto 指示一旦頁面加載，則開始加載音頻/視頻。 metadata 指示當頁面加載後僅加載音頻/視頻的元數據。 none 指示頁面加載後不該加載音頻/視頻。
多數瀏覽器將auto做爲默認值api
played 屬性返回 TimeRanges 對象瀏覽器
currentTime網絡
ended 返回音頻/視頻的播放是否已結束app
paused 屬性返回音頻/視頻是否已暫停dom
loop設置或返回音頻/視頻是否應該在結束時再次播放。
muted 屬性設置或返回音頻/視頻是否應該被靜音（關閉聲音）
volume 屬性設置或返回音頻/視頻的當前音量。1爲最高
networkState 屬性返回音頻/視頻的當前網絡狀態
buffered//返回表示音頻/視頻已緩衝部分的 TimeRanges 對象
currentSrc 屬性返回當前音頻/視頻的 URL
currentTime 屬性設置或返回音頻/視頻播放的當前位置
defaultMuted 屬性設置或返回音頻/視頻是否默認靜音（只有chrome支持）
defaultPlaybackRate 屬性設置或返回音頻/視頻的默認播放速度（只有chrome支持）
duration 屬性返回當前音頻/視頻的長度，以秒計
readyState 屬性返回音頻/視頻的當前就緒狀態
0 = HAVE_NOTHING - 沒有關於音頻/視頻是否就緒的信息
1 = HAVE_METADATA - 關於音頻/視頻就緒的元數據
2 = HAVE_CURRENT_DATA - 關於當前播放位置的數據是可用的，但沒有足夠的數據來播放下一幀/毫秒
3 = HAVE_FUTURE_DATA - 當前及至少下一幀的數據是可用的
4 = HAVE_ENOUGH_DATA - 可用數據足以開始播放
seekable 屬性返回 TimeRanges 對象 可尋址範圍指的是用戶在音頻/視頻中可尋址（移動播放位置）的時間範圍
seeking 屬性返回用戶目前是否在音頻/視頻中尋址
事件
loadstart 當瀏覽器開始尋找指定的音頻/視頻時，會發生 loadstart 事件
durationchange 當音頻/視頻的時長已更改時
loadedmetadata 當指定的音頻/視頻的元數據已加載時
loadeddata 噹噹前幀的數據已加載，但沒有足夠的數據來播放指定音頻/視頻的下一幀時
progress 瀏覽器正在下載指定的音頻/視頻時
oncanplay當瀏覽器能夠播放音頻/視頻時
canplaythrough當瀏覽器預計可以在不停下來進行緩衝的狀況下持續播放指定的音頻/視頻時，
ontimeupdate 事件在視頻/音頻（audio/video）當前的播放位置發送改變時觸發
onended
方法
play()
pause()
load()//從新加載視頻
canPlayType()//方法瀏覽器是否能播放指定的音頻/視頻類型
手寫自制原生播放器forpc事件
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,height=device-height,
user-scalable=no,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,target-densitydpi=device-dpi"/>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{list-style:none;margin:0;padding:0;}
pre,form,textarea,th,td,select{margin:0;padding:0;}
em{font-style:normal;}
a{text-decoration:none}
img{border:none;vertical-align:top;}
table{border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
input,textarea{border:none;outline:none}
a,input,button{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
input,button{
-webkit-appearance:none;
border-radius:0;
}
body *{
/*蘋果手機該樣式會致使input textarea獲取不到焦點*/
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
-webkit-text-size-adjust:100%;
font-family:Arial,PingFangSC-Regular, sans-serif,Simhei,STXihei;
}
/* end reset */
/* public */
/* end public */
</style>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var hWidth = clientWidth / 750*100;//基於設計稿的寬度爲750
docEl.style.fontSize = hWidth + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<link href='http://at.alicdn.com/t/font_600309_yp98vj8xws.css' type='text/css' rel='stylesheet'/>
<style>
.g-box{
position: relative;
margin-bottom:50px;
}
.player{
width:100%;
position: relative;
}
.poster{
position: absolute;
width:100%;
top:0;
}
.g-operation{
bottom:0px;
position: absolute;
width:100%;
}
.first-line{
overflow: hidden;
}
.progress-bar{
height:15px;
background: #e8e3e4e0;
position: relative;
}
.operation-btn{
position: absolute;
width:15px;
height:100%;
top:0;
background: green;
}
.time{
display: inline-block;
color:#fff
}
.icos{
float:right
}
.pause{
display: none;
}
.vol-box{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.vol-bar{
position: absolute;
bottom: 30px;
width:6px;
height:50px;
background: pink;
display: none;
}
.unvol{
display: none;
}
.full-screen{
margin-left: 26px;
}
.vol-btn{
position: absolute;
width:100%;
height:8px;
background: yellow
}
.iconfont{
font-size: 26px;
color:#711b1b
}
</style>
</head>
<body>
<div class="g-box">
<div class="g-player">
<video src="http://www.170mv.com/tool/jiexi/ajax/pid/13134/vid/3242313.mp4" class="player" volume="1"></video>
<img src="https://img2.soyoung.com/upload/20180604/3/20180604205305422.jpg" class="poster"/>
</div>
<div class="g-operation">
<div class="first-line">
<span class="switch">
<i class="iconfont icon-bofang play"></i>
<i class="iconfont icon-zanting1 pause"></i>
</span>
<div class="time">
<span class="current-time">00:00</span>/
<span class="total-time">12:00</span>
</div>
<div class="icos">
<span class="vol-box">
<span class="vol-bar">
<span class="vol-btn"></span>
</span>
<span class="switch-vol">
<i class="vol iconfont icon-laba"></i>
<i class="unvol iconfont icon-jingyin"></i>
</span>
</span>
<i class="full-screen iconfont icon-fangda"></i>
</div>
</div>
<div class="progress-bar">
<span class="operation-btn"></span>
</div>
</div>
</div>
<div class="g-box">
<div class="g-player">
<video src="http://www.170mv.com/tool/jiexi/ajax/pid/13134/vid/3242313.mp4" class="player" volume="1"></video>
<img src="https://img2.soyoung.com/upload/20180604/3/20180604205305422.jpg" class="poster"/>
</div>
<div class="g-operation">
<div class="first-line">
<span class="switch">
<i class="iconfont icon-bofang play"></i>
<i class="iconfont icon-zanting1 pause"></i>
</span>
<div class="time">
<span class="current-time">00:00</span>/
<span class="total-time">12:00</span>
</div>
<div class="icos">
<span class="vol-box">
<span class="vol-bar">
<span class="vol-btn"></span>
</span>
<span class="switch-vol">
<i class="vol iconfont icon-laba"></i>
<i class="unvol iconfont icon-jingyin"></i>
</span>
</span>
<i class="full-screen iconfont icon-fangda"></i>
</div>
</div>
<div class="progress-bar">
<span class="operation-btn"></span>
</div>
</div>
</div>
<script>
class Video{
constructor(ele){
this.opBtn=ele.getElementsByClassName('operation-btn')[0]
this.proBar=ele.getElementsByClassName('progress-bar')[0]
this.video=ele.getElementsByClassName('player')[0]
this.curTime=ele.getElementsByClassName('current-time')[0]
this.totalTime=ele.getElementsByClassName('total-time')[0]
this.playBtn=ele.getElementsByClassName('play')[0]
this.pauseBtn=ele.getElementsByClassName('pause')[0]
this.switch=ele.getElementsByClassName('switch')[0]
this.poster=ele.getElementsByClassName('poster')[0]
this.disX=0
this.Dvalue=this.proBar.offsetWidth - this.opBtn.offsetWidth
this.volBar=ele.getElementsByClassName('vol-bar')[0]
this.volBtn=ele.getElementsByClassName('vol-btn')[0]
this.disY=0
this.Dy=42||this.volBar.offsetHeight - this.volBtn.offsetHeight
this.vol=ele.getElementsByClassName('vol')[0]
this.unvol=ele.getElementsByClassName('unvol')[0]
this.switchVol=ele.getElementsByClassName('switch-vol')[0]
this.fullScr=ele.getElementsByClassName('full-screen')[0]
}
init(){
this.controlGress()
this.getTime()
this.userAction()
this.controlVol()
}
controlGress(){
this.opBtn.onmousedown = (ev)=>{
var ev = ev || window.event;
this.disX = ev.clientX - this.opBtn.offsetLeft;
document.onmousemove = (ev)=>{
var ev = ev || window.event;
var L = ev.clientX - this.disX;
if(L<0){
L = 0;
}
else if(L>this.Dvalue){
L = this.Dvalue;
}
this.opBtn.style.left = L + 'px';
var scale = L/(this.Dvalue);
this.video.currentTime=scale*this.video.duration
this.playIt();
};
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
};
this.proBar.onmousedown=(ev)=>{
var ev = ev || window.event;
var x=ev.clientX - this.proBar.getBoundingClientRect().left;
console.log(x)
if(x>this.Dvalue){
x=this.Dvalue
}
this.opBtn.style.left = x + 'px';
var scale = x/(this.Dvalue);
this.video.currentTime=scale*this.video.duration
this.playIt()
}
}
controlVol(){
this.volBtn.onmousedown = (ev)=>{
var ev = ev || window.event;
this.disY = ev.clientY - this.volBtn.offsetTop;
document.onmousemove = (ev)=>{
var ev = ev || window.event;
var T = ev.clientY - this.disY;
console.log(this.Dy,'move')
if(T<0){
T = 0;
}
else if(T>this.Dy){
T = this.Dy;
this.mutedIt()
}
this.volBtn.style.top = T + 'px';
var scale = 1-T/(this.Dy);
this.video.volume=scale
};
document.onmouseup = function(){
document.onmousemove = null;
};
return false;
};
this.volBar.onmousedown=(ev)=>{
var ev = ev || window.event;
var y=ev.clientY - this.volBar.getBoundingClientRect().top;
console.log(ev.clientY,this.volBar.getBoundingClientRect().top,111)
console.log(y)
console.log(this.Dy,'d')
if(y>this.Dy){
y=this.Dy
this.mutedIt()
}
this.volBtn.style.top = y + 'px';
var scale = 1-y/(this.Dy);
this.video.volume=scale
}
}
getTime(){
this.video.ondurationchange=()=>{
this.totalTime.innerHTML=this.formaTime(this.video.duration)
this.nowTime()
}
}
nowTime(){//當前時間和進度條設置
this.curTime.innerHTML=this.formaTime(this.video.currentTime)
var s=this.video.currentTime/this.video.duration
this.opBtn.style.left=s*this.Dvalue+'px'
}
playIt(){//播放中 播放+設置當前時間和進度條
this.video.play()
this.poster.style.opacity=0
this.playBtn.style.display='none'
this.pauseBtn.style.display='inline-block'
this.video.ontimeupdate=()=>{
this.nowTime()
}
}
pauseIt(){
this.video.pause()
this.poster.style.opacity=1
this.playBtn.style.display='inline-block'
this.pauseBtn.style.display='none'
}
mutedIt(){//靜音
this.vol.style.display=this.volBar.style.display="none"
this.unvol.style.display="inline-block"
this.video.muted=true
}
loudIt(){//非靜音
this.unvol.style.display="none"
this.vol.style.display=this.volBar.style.display="inline-block"
this.video.muted=false
}
fullScreen(){
var ele = document.documentElement;
if (this.video.requestFullscreen) {
this.video.requestFullscreen();
} else if (this.video.mozRequestFullScreen) {
this.video.mozRequestFullScreen();
} else if (this.video.webkitRequestFullScreen) {
this.video.webkitRequestFullScreen();
}
}
exitFullScr(){
var de = document;
if (this.video.exitFullscreen) {
this.video.exitFullscreen();
} else if (this.video.mozCancelFullScreen) {
this.video.mozCancelFullScreen();
} else if (this.video.webkitCancelFullScreen) {
this.video.webkitCancelFullScreen();
}
}
userAction(){
this.switch.onclick=this.poster.onclick=()=>{
if(this.video.paused){
this.playIt()
}else{
this.pauseIt()
}
}
this.switchVol.onclick=()=>{
if(this.video.muted){
this.loudIt()
}else{
this.mutedIt()
}
}
this.fullScr.onclick=()=>{
this.fullScreen()
this.exitFullScr()
}
}
toTen(n) {
let a = n < 10 ? '0' + n : n;
return a;
}
formaTime(seconds){
let hour=parseInt(seconds/3600)
let se=parseInt(seconds%60)
let m=parseInt(seconds/60)
let t=this.toTen(hour)+':'+this.toTen(m)+':'+this.toTen(se)
return t
}
}
window.onload=()=>{
}
let gBox=document.getElementsByClassName('g-box')[0]
let gBox1=document.getElementsByClassName('g-box')[1]
let video=new Video(gBox)
video.init()
let video1=new Video(gBox1)
video1.init()
</script>
</body>
</html>
for移動端 事件
<!doctype html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,height=device-height,
user-scalable=no,initial-scale=1.0,minimum-scale=1.0,
maximum-scale=1.0,target-densitydpi=device-dpi"/>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}
ol,ul{list-style:none;margin:0;padding:0;}
pre,form,textarea,th,td,select{margin:0;padding:0;}
em{font-style:normal;}
a{text-decoration:none}
img{border:none;vertical-align:top;}
table{border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
input,textarea{border:none;outline:none}
a,input,button{
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
input,button{
-webkit-appearance:none;
border-radius:0;
}
body *{
/*蘋果手機該樣式會致使input textarea獲取不到焦點*/
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
-webkit-text-size-adjust:100%;
font-family:Arial,PingFangSC-Regular, sans-serif,Simhei,STXihei;
}
/* end reset */
/* public */
/* end public */
</style>
<script>
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
var hWidth = clientWidth / 750*100;//基於設計稿的寬度爲750
docEl.style.fontSize = hWidth + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<link href='http://at.alicdn.com/t/font_600309_yp98vj8xws.css' type='text/css' rel='stylesheet'/>
<style>
.g-box{
position: relative;
margin-bottom:50px;
}
.player{
width:100%;
position: relative;
}
.poster{
position: absolute;
width:100%;
top:0;
}
.g-operation{
bottom:0px;
position: absolute;
width:100%;
background: rgba(0,0,0,.5)
}
.first-line{
overflow: hidden;
}
.progress-bar{
height:15px;
background: #ffffff82;
position: relative;
}
.operation-btn{
position: absolute;
width:15px;
height:100%;
top:0;
background:pink;
}
.time{
display: inline-block;
color:#fff
}
.icos{
float:right
}
.pause{
display: none;
}
.vol-box{
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.vol-bar{
position: absolute;
bottom: 30px;
width:6px;
height:50px;
background: pink;
display: none;
}
.unvol{
display: none;
}
.full-screen{
margin-left: 26px;
}
.vol-btn{
position: absolute;
width:100%;
height:8px;
background: yellow
}
.iconfont{
font-size: 26px;
color:pink
}
</style>
</head>
<body>
<div class="g-box">
<div class="g-player">
<video src="http://www.170mv.com/tool/jiexi/ajax/pid/13134/vid/3242313.mp4" class="player" volume="1"></video>
<img src="https://img2.soyoung.com/upload/20180604/3/20180604205305422.jpg" class="poster"/>
</div>
<div class="g-operation">
<div class="first-line">
<span class="switch">
<i class="iconfont icon-bofang play"></i>
<i class="iconfont icon-zanting1 pause"></i>
</span>
<div class="time">
<span class="current-time">00:00</span>/
<span class="total-time">12:00</span>
</div>
<div class="icos">
<span class="vol-box">
<span class="vol-bar">
<span class="vol-btn"></span>
</span>
<span class="switch-vol">
<i class="vol iconfont icon-laba"></i>
<i class="unvol iconfont icon-jingyin"></i>
</span>
</span>
<i class="full-screen iconfont icon-fangda"></i>
</div>
</div>
<div class="progress-bar">
<span class="operation-btn"></span>
</div>
</div>
</div>
<div class="g-box">
<div class="g-player">
<video src="http://www.170mv.com/tool/jiexi/ajax/pid/13134/vid/3242313.mp4" class="player" volume="1"></video>
<img src="https://img2.soyoung.com/upload/20180604/3/20180604205305422.jpg" class="poster"/>
</div>
<div class="g-operation">
<div class="first-line">
<span class="switch">
<i class="iconfont icon-bofang play"></i>
<i class="iconfont icon-zanting1 pause"></i>
</span>
<div class="time">
<span class="current-time">00:00</span>/
<span class="total-time">12:00</span>
</div>
<div class="icos">
<span class="vol-box">
<span class="vol-bar">
<span class="vol-btn"></span>
</span>
<span class="switch-vol">
<i class="vol iconfont icon-laba"></i>
<i class="unvol iconfont icon-jingyin"></i>
</span>
</span>
<i class="full-screen iconfont icon-fangda"></i>
</div>
</div>
<div class="progress-bar">
<span class="operation-btn"></span>
</div>
</div>
</div>
<script>
class Video{
constructor(ele){
this.opBtn=ele.getElementsByClassName('operation-btn')[0]
this.proBar=ele.getElementsByClassName('progress-bar')[0]
this.video=ele.getElementsByClassName('player')[0]
this.curTime=ele.getElementsByClassName('current-time')[0]
this.totalTime=ele.getElementsByClassName('total-time')[0]
this.playBtn=ele.getElementsByClassName('play')[0]
this.pauseBtn=ele.getElementsByClassName('pause')[0]
this.switch=ele.getElementsByClassName('switch')[0]
this.poster=ele.getElementsByClassName('poster')[0]
this.disX=0
this.Dvalue=this.proBar.offsetWidth - this.opBtn.offsetWidth
this.volBar=ele.getElementsByClassName('vol-bar')[0]
this.volBtn=ele.getElementsByClassName('vol-btn')[0]
this.disY=0
this.Dy=42||this.volBar.offsetHeight - this.volBtn.offsetHeight
this.vol=ele.getElementsByClassName('vol')[0]
this.unvol=ele.getElementsByClassName('unvol')[0]
this.switchVol=ele.getElementsByClassName('switch-vol')[0]
this.fullScr=ele.getElementsByClassName('full-screen')[0]
}
init(){
this.controlGress()
this.getTime()
this.userAction()
this.controlVol()
}
controlGress(){
this.opBtn.ontouchstart = (ev)=>{
var ev = ev || window.event;
this.disX = ev.changedTouches[0].clientX - this.opBtn.offsetLeft;
document.ontouchmove = (ev)=>{
var ev = ev || window.event;
var L = ev.changedTouches[0].clientX - this.disX;
if(L<0){
L = 0;
}
else if(L>this.Dvalue){
L = this.Dvalue;
}
this.opBtn.style.left = L + 'px';
var scale = L/(this.Dvalue);
this.video.currentTime=scale*this.video.duration
this.playIt();
};
document.ontouchend = function(){
document.ontouchmove = null;
};
return false;
};
this.proBar.ontouchstart=(ev)=>{
var ev = ev || window.event;
var x=ev.changedTouches[0].clientX - this.proBar.getBoundingClientRect().left;
console.log(x)
if(x>this.Dvalue){
x=this.Dvalue
}
this.opBtn.style.left = x + 'px';
var scale = x/(this.Dvalue);
this.video.currentTime=scale*this.video.duration
this.playIt()
}
}
controlVol(){
this.volBtn.ontouchstart = (ev)=>{
var ev = ev || window.event;
this.disY = ev.changedTouches[0].clientY - this.volBtn.offsetTop;
document.ontouchmove = (ev)=>{
var ev = ev || window.event;
var T = ev.changedTouches[0].clientY - this.disY;
console.log(this.Dy,'move')
if(T<0){
T = 0;
}
else if(T>this.Dy){
T = this.Dy;
this.mutedIt()
}
this.volBtn.style.top = T + 'px';
var scale = 1-T/(this.Dy);
this.video.volume=scale
};
document.ontouchend = function(){
document.ontouchmove = null;
};
return false;
};
this.volBar.ontouchstart=(ev)=>{
var ev = ev || window.event;
var y=ev.changedTouches[0].clientY - this.volBar.getBoundingClientRect().top;
console.log(ev.changedTouches[0].clientY,this.volBar.getBoundingClientRect().top,111)
console.log(y)
console.log(this.Dy,'d')
if(y>this.Dy){
y=this.Dy
this.mutedIt()
}
this.volBtn.style.top = y + 'px';
var scale = 1-y/(this.Dy);
this.video.volume=scale
}
}
getTime(){
this.video.ondurationchange=()=>{
this.totalTime.innerHTML=this.formaTime(this.video.duration)
this.nowTime()
}
}
nowTime(){//當前時間和進度條設置
this.curTime.innerHTML=this.formaTime(this.video.currentTime)
var s=this.video.currentTime/this.video.duration
this.opBtn.style.left=s*this.Dvalue+'px'
}
playIt(){//播放中 播放+設置當前時間和進度條
this.video.play()
this.poster.style.opacity=0
this.playBtn.style.display='none'
this.pauseBtn.style.display='inline-block'
this.video.ontimeupdate=()=>{
this.nowTime()
}
}
pauseIt(){
this.video.pause()
this.poster.style.opacity=1
this.playBtn.style.display='inline-block'
this.pauseBtn.style.display='none'
}
mutedIt(){//靜音
this.vol.style.display=this.volBar.style.display="none"
this.unvol.style.display="inline-block"
this.video.muted=true
}
loudIt(){//非靜音
this.unvol.style.display="none"
this.vol.style.display=this.volBar.style.display="inline-block"
this.video.muted=false
}
fullScreen(){
var ele = document.documentElement;
if (this.video.requestFullscreen) {
this.video.requestFullscreen();
} else if (this.video.mozRequestFullScreen) {
this.video.mozRequestFullScreen();
} else if (this.video.webkitRequestFullScreen) {
this.video.webkitRequestFullScreen();
}
}
exitFullScr(){
var de = document;
if (this.video.exitFullscreen) {
this.video.exitFullscreen();
} else if (this.video.mozCancelFullScreen) {
this.video.mozCancelFullScreen();
} else if (this.video.webkitCancelFullScreen) {
this.video.webkitCancelFullScreen();
}
}
userAction(){
this.switch.onclick=this.poster.onclick=()=>{
if(this.video.paused){
this.playIt()
}else{
this.pauseIt()
}
}
this.switchVol.onclick=()=>{
if(this.video.muted){
this.loudIt()
}else{
this.mutedIt()
}
}
this.fullScr.onclick=()=>{
this.fullScreen()
this.exitFullScr()
}
}
toTen(n) {
let a = n < 10 ? '0' + n : n;
return a;
}
formaTime(seconds){
let hour=parseInt(seconds/3600)
let se=parseInt(seconds%60)
let m=parseInt(seconds/60)
let t=this.toTen(hour)+':'+this.toTen(m)+':'+this.toTen(se)
return t
}
}
window.onload=()=>{
}
let gBox=document.getElementsByClassName('g-box')[0]
let gBox1=document.getElementsByClassName('g-box')[1]
let video=new Video(gBox)
video.init()
let video1=new Video(gBox1)
video1.init()
</script>
</body>
</html>
相關文章
- 1. chrome播放video沒法自動播放
- 2. 自定義H5 video 播放器
- 3. 播放器一（FFMPEG+SDL+VIDEO）
- 4. 模擬video播放器
- 5. H5 video 播放器demo
- 6. H5——video百花齊放（瀏覽器自帶的播放器）
- 7. DIY video player - 自定義video播放器樣式
- 8. 自定義基於HTML5的video播放器—Customize your video player
- 9. 【Code-Snippet】Video播放
- 10. audio video 控制播放和中止
- 更多相關文章...
- • ASP.NET MVC - 控制器 - ASP.NET 教程
- • SVG 漸變- 放射性 - SVG 教程
- • Docker容器實戰(六) - 容器的隔離與限制
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
