自制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的锁机制
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虚拟机中,安装华为电脑的deepin操作系统
- 2. 强烈推荐款下载不限速解析神器
- 3. 【区块链技术】孙宇晨：区块链技术带来金融服务的信任变革
- 4. 搜索引起的链接分析-计算网页的重要性
- 5. TiDB x 微众银行 | 耗时降低 58%，分布式架构助力实现普惠金融
- 6. 《数字孪生体技术白皮书》重磅发布（附完整版下载）
- 7. 双十一“避坑”指南：区块链电子合同为电商交易保驾护航！
- 8. 区块链产业，怎样“链”住未来？
- 9. OpenglRipper使用教程
- 10. springcloud请求一次好用一次不好用zuul Name or service not known
欢迎关注本站公众号,获取更多信息
