自定义html播放器,自定义播放器.html

Document

html,body{

height: 100%;

overflow: hidden;

}

#wrap{

width: 100%;

height: 100%;

position: relative;

}

.out{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

.playPause{

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

z-index: 2;

border: 1px solid white;

background-color: rgba(0, 255,255,0.5)

}

.playPause>span{

display: block;

text-align: center;

line-height: 50px;

}

.time{

position: absolute;

bottom: 30px;

left: 10px;

color: white;

}

.outer{

width: 98%;

height: 5px;

/* margin: 0 auto; */

background-color: white;

position: absolute;

bottom: 10px;

left: 1%;

border-radius:5px;

}

.inner{

width: 5%;

height: 5px;

background-color: greenyellow;

border-radius:5px;

}

.volumeMenu{

position: absolute;

bottom: 30px;

right: 10px;

color: white;

}

/

window.onload = function(){

var playPause = document.querySelector('.playPause');

playPause.onclick = function(){

if(myVideo.paused){

myVideo.play();

playPause.children[0].className = 'glyphicon glyphicon-pause';

}else{

myVideo.pause();

playPause.children[0].className = 'glyphicon glyphicon-play';

}

}

var currentTime = document.querySelector('.currentTime');

var durationTime = document.querySelector('.durationTime');

var inner = document.querySelector('.inner');

myVideo.ontimeupdate = function(){

durationTime.innerHTML = timeFormat(myVideo.duration);//总时长

currentTime.innerHTML = timeFormat(myVideo.currentTime);//当前时长

var bfb = myVideo.currentTime / myVideo.duration *100 + '%';

inner.style.width = bfb;

}

var outer = document.querySelector('.outer');

outer.onclick = function(e){

var x = e.pageX -outer.getBoundingClientRect().left;

inner.style.width = x + 'px';

var outerWidth = outer.offsetWidth;

var outerWidth = outer.getAttribute('width');

console.log(outerWidth);

myVideo.currentTime = x / outerWidth * myVideo.duration;

}

outer.onmousedown = function(e){

var x = e.pageX -outer.getBoundingClientRect().left;

inner.style.width = x + 'px';

var outerWidth = outer.offsetWidth;

console.log(outerWidth);

myVideo.currentTime = x / outerWidth * myVideo.duration;

this.move = true;

}

outer.onmousemove = function(e){

if(this.move){

var x = e.pageX -outer.getBoundingClientRect().left;

inner.style.width = x + 'px';

var outerWidth = outer.offsetWidth;

console.log(outerWidth);

myVideo.currentTime = x / outerWidth * myVideo.duration;

}

}

outer.onmouseup = function(){

this.move = false;

}

var spanNodes = document.querySelectorAll('.volumeMenu span');

console.log(spanNodes);

spanNodes[0].onclick = function(){

if(myVideo.muted){

myVideo.muted = false;

this.className = 'glyphicon glyphicon-headphones';

}else{

myVideo.muted = true;

this.className = 'glyphicon glyphicon-volume-off';

}

}

spanNodes[1].onclick = function(){

if(myVideo.volume<1){

myVideo.volume = myVideo.volume + 0.1;

if(myVideo.volume>0.9) myVideo.volume = 1;

spanNodes[0].className = 'glyphicon glyphicon-headphones';

}

}

spanNodes[2].onclick = function(){

if(myVideo.volume>0 && myVideo.volume<0.1){

// myVideo.volume = 0;

spanNodes[0].className = 'glyphicon glyphicon-volume-off';

}else{

myVideo.volume = myVideo.volume - 0.1;

console.log(myVideo.volume);

}

}

spanNodes[3].onclick = function(){

myVideo.webkitRequestFullScreen();

}

//将秒转换为时分秒

// console.log(timeFormat(220.843))

function timeFormat(time){

var second = parseInt(time);

var minute = 0;

var hour = 0;

if(second>=60){

minute = parseInt(second/60);

second = parseInt(second%60);

if(minute>=60){

hour = parseInt(minute/60);

minute = parseInt(minute%60);

}

}

if(second<10) second = '0' + second;

if(minute<10) minute = '0' + minute;

var result = minute + ':' + second;

if(hour > 0) result = hour + ':' + result;

return result;

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史