最近听了一首STAY的翻唱视频就有点想做一个简单的视频播放
先是html的编写:
<video id="Shaun_video" class="Shaun_class" width="600px" >
<source src="MP4路径" type="video/mp4">
</video>
<p id="jindu">0</p>
第二步:
var Shaun_video = document.getElementById('Shaun_video');//获取id的值
Shaun_video.onclick = function(){
if(Shaun_video.paused)
Shaun_video.play();
else
Shaun_video.pause();
}//简单的if-else判断播放暂停视频
这样就可以了
之后想要显示播放的时间和进度的话,要在方法体里添加定时器、currentTime和duration参数
具体可以参考如下:
var jindu = document.getElementById('jindu');
setInterval(function(){
jindu.innerHTML = Shaun_video.currentTime;
maxTimeS.innerHTML =(Shaun_video.duration;
},1000);
要想好看点:
html:
<div class="p_q">
<p id="jinduM">0</p>
<p>:</p>
<p id="jinduS">0</p>
<p>/</p>
<p id="maxTimeM">0</p>
<p>:</p>
<p id="maxTimeS">0</p>
</div>
<!--进度条html-->
<div class="progressShow1" id="progressShow1">
<div class="progressShow2" id="progressShow2"></div>
</div>
会自动换行,所以要添加css样式
css:
.p_q{
position: relative;
top:-25px;
color: #ffffffff;
z-index: 1;/*放在最上面*/
}
.p_q p{
display: inline;
}
/*进度条css定位*/
.progressShow1{
position: relative;
left: 100px;
top: -35px;
width: 100px;
height: 5px;
background-color: rgba(71, 116, 74, 0.418);
z-index: 1;
}
.progressShow2{
width: 0px;
height: 5px;
background-color: blue;
}
js:
setInterval(function(){
jinduM.innerHTML = parseInt(Shaun_video.currentTime/60);
jinduS.innerHTML = parseInt(Shaun_video.currentTime%60);
/*进度条代码,就是一个长方形*/
var progressShow1 = document.getElementById('progressShow1');
var progressShow2 = document.getElementById('progressShow2');
progressShow1.style.width = Shaun_video.duration + "px";
progressShow2.style.width = Shaun_video.currentTime + "px";
},1000);
maxTimeM.innerHTML = parseInt(Shaun_video.duration/60);//parseInt();去除小数点方法
maxTimeS.innerHTML = parseInt(Shaun_video.duration%60);
进度条: