video标签实现视频播放和进度显示_video进度条显示时间戳

最近听了一首STAY的翻唱视频就有点想做一个简单的视频播放

先是html的编写:

<video id="Shaun_video" class="Shaun_class" width="600px" >
                <source src="MP4路径" type="video/mp4">
</video>
<p id="jindu">0</p>
1
2
3
4

第二步:

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判断播放暂停视频
1
2
3
4
5
6
7

这样就可以了

---

之后想要显示播放的时间和进度的话，要在方法体里添加定时器、currentTime和duration参数
具体可以参考如下:

var jindu = document.getElementById('jindu');
setInterval(function(){
        jindu.innerHTML = Shaun_video.currentTime;
		maxTimeS.innerHTML =(Shaun_video.duration;
    },1000);
1
2
3
4
5

---

要想好看点:
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

会自动换行，所以要添加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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);
1
2
3
4
5
6
7
8
9
10
11
12

进度条:

效果图: