為HTML5影片增加播放進度條的小作業

好像這次沒有要交作業, 但是上課聽到說可以試著增加播放進度條, 就試著寫寫看,
感覺UX方面還有滿多可修改的空間, 未來有機會再繼續優化...

完整code如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Video</title>
<style>
.progress{
border:1px solid #e0eff9;
text-align:center;
height:30px;
width:500px;
margin:1em 0;
position:relative;
border-radius: 3px;
}
.progress-bar {
background: rgba(242,246,248,1);
       background: -moz-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(242,246,248,1) 10%, rgba(224,239,249,1) 22%, rgba(242,246,248,1) 35%, rgba(190,224,247,1) 49%, rgba(224,239,249,1) 64%, rgba(242,246,248,1) 77%, rgba(190,224,247,1) 89%, rgba(224,239,249,1) 100%);
       background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(10%, rgba(242,246,248,1)), color-stop(22%, rgba(224,239,249,1)), color-stop(35%, rgba(242,246,248,1)), color-stop(49%, rgba(190,224,247,1)), color-stop(64%, rgba(224,239,249,1)), color-stop(77%, rgba(242,246,248,1)), color-stop(89%, rgba(190,224,247,1)), color-stop(100%, rgba(224,239,249,1)));
       background: -webkit-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(242,246,248,1) 10%, rgba(224,239,249,1) 22%, rgba(242,246,248,1) 35%, rgba(190,224,247,1) 49%, rgba(224,239,249,1) 64%, rgba(242,246,248,1) 77%, rgba(190,224,247,1) 89%, rgba(224,239,249,1) 100%);
       background: -o-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(242,246,248,1) 10%, rgba(224,239,249,1) 22%, rgba(242,246,248,1) 35%, rgba(190,224,247,1) 49%, rgba(224,239,249,1) 64%, rgba(242,246,248,1) 77%, rgba(190,224,247,1) 89%, rgba(224,239,249,1) 100%);
        background: -ms-linear-gradient(-45deg, rgba(242,246,248,1) 0%, rgba(242,246,248,1) 10%, rgba(224,239,249,1) 22%, rgba(242,246,248,1) 35%, rgba(190,224,247,1) 49%, rgba(224,239,249,1) 64%, rgba(242,246,248,1) 77%, rgba(190,224,247,1) 89%, rgba(224,239,249,1) 100%);
        background: linear-gradient(135deg, rgba(242,246,248,1) 0%, rgba(242,246,248,1) 10%, rgba(224,239,249,1) 22%, rgba(242,246,248,1) 35%, rgba(190,224,247,1) 49%, rgba(224,239,249,1) 64%, rgba(242,246,248,1) 77%, rgba(190,224,247,1) 89%, rgba(224,239,249,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1 );
height:30px;
position: absolute;
z-index: 1;
top:0;
left:0;
line-height: 1;
border-radius: 2px;
}
span {
position: absolute;
z-index: 2;
top: 32px;
        right: 0;
font-size: 1em;
color: #777;
}
</style>
</head>
<body>
<video id="video" src="movie.mp4"></video>
<button onclick="video.play();">Play</button>
<button onclick="video.pause();">Pause</button>
<button onclick="replay();">Replay</button>
<div class="progress">
<div id="probar" class="progress-bar"></div>
<span id="showProgress"></span>
</div>

<script>
//用程式寫播放控制 -- 寫自己的介面
var video;
var p = 0;

window.onload = function() {
video = document.getElementById("video");
video.addEventListener("timeupdate", updateTime);

};

function replay() {
video.currentTime = 0;
video.play();
}

function updateTime() {
p = Math.floor(video.currentTime/video.duration * 100);
document.getElementById("showProgress").innerHTML = p + "%";
document.getElementById("probar").style.width = p + "%";
}
</script>
</body>
</html>



留言

張貼留言

熱門文章