兼容问题
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的
<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 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
api属性
controls
controlslist="nodownload" 无下载按钮
video::-webkit-media-controls-fullscreen-button 无全屏
playsinline x5-playsinline webkit-playsinline 加上这个属性解决ios播放默认全屏
autoplay
preload属性设置或返回是否在页面加载后立即加载音频/视频：auto|metadata|none
auto 指示一旦页面加载，则开始加载音频/视频。
metadata 指示当页面加载后仅加载音频/视频的元数据。
none 指示页面加载后不应加载音频/视频。多数浏览器将auto作为默认值
played 属性返回 TimeRanges 对象
currentTime
ended 返回音频/视频的播放是否已结束
paused 属性返回音频/视频是否已暂停
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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。