原生JS写个简单播放器
下午没事写的，主要是一些简单的播放功能；
1、播放、暂停
2、全屏
3、点进度条调节播放位置、
素材是自己画的
源码素材都在
https://pan.baidu.com/s/17BmMMg0AqNltGP3wEAbRbg提取码：ll62
以下是源代码：
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>Documenttitle>
<link rel="stylesheet" href="myplayer.css">
<script src="myplayer.js">script>
head>
<body>
<div class="player">
<video src="18.mp4" poster="2.png" id="video">video>
<div class="ctrl">
<a href=javascript:; class="play" id="play">a>
<div id="prs">
<div id="long">
<div id="progress">div>
<div id="playing">div>
<a href="javascript:;" id="pctrl">a>
div>
div>
<p class="tnow">0:00:00p>
<p>/p>
<p class="tlong">0:00:00p>
<a href=javascript:; class="full" id="full">a>
div>
div>
body>
html>
JS部分：
window.onload=function(){
var playbtn=document.getElementById("play");
var playfull=document.getElementById("full");
var video=document.querySelector("#video")
var playing=document.querySelector("#playing")
var tnow=document.querySelector(".tnow");
var prs=document.querySelector("#prs");
var tlong=document.querySelector(".tlong");
var pctrl=document.querySelector("#pctrl");
var playflag=false;
playbtn.onclick=function(){
playflag=!playflag;
if(playflag){
playbtn.style.backgroundPosition="50%";
video.play();
}else{
playbtn.style.backgroundPosition="-10%";
video.pause();
}
}
playfull.onclick=function(){
if(video.requestFullscreen){
video.requestFullscreen();
}else{
alert("您的浏览器落伍了，请更换Chrome或者firefox浏览器");
}
}
video.onended=function(){
video.currentTime=0;
playbtn.style.backgroundPosition="-10%";
playflag=false;
video.pause();
}
video.ontimeupdate=function(){
var percent=(video.currentTime/video.duration)*100 ;
playing.style.width=percent+"%";
tlong.innerHTML=showtime(video.duration);
tnow.innerHTML=showtime(video.currentTime);
}
pctrl.onclick=function(event){
video.currentTime=(event.pageX-prs.offsetLeft)/prs.offsetWidth*video.duration;
}
}
function showtime(time){
var hour,min,sec;
hour=parseInt(time/3600);
min=parseInt(time%3600/60);
sec=parseInt(time%60) ;
return PrefixInteger(hour, 2)+":"+PrefixInteger(min, 2)+":"+PrefixInteger(sec, 2);
}
function PrefixInteger(num, length) {
return (Array(length).join('0') + num).slice(-length);
}
CSS部分：
*{
padding: 0;
margin: 0;
}
body{
background-color: blanchedalmond;
}
.player{
width: 800px;
background-color: #000;
margin: 50px auto;
}
video{
width: 100%;
margin:0 0% ;
}
.ctrl{
width: 100%;
height: 36px;
}
.ctrl a{
display:inline-block;
width: 5%;
height: 100%;
}
.play:link{
float: left;
background: url(play.png) no-repeat scroll;
background-size: 250%;
background-position: -10%;
}
.full:link{
float:right;
background: url(play.png) no-repeat scroll;
background-size: 250%;
background-position: 110%;
}
#prs{
width: 70%;
height: 100%;
float: left;
position: relative;
}
#long{
width: 100%;
height: 40%;
background-color: #555;
position: absolute;
top:30%
}
#progress{
width: 60%;
height: 100%;
background-color: #ccc;
}
#playing{
width: 0;
height: 100%;
background-color: red;
position: absolute;
top: 0;
}
p{
color: #ccc;
float: left;
position: relative;
top: 20%;
left: 3%;
}
#pctrl{
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}