HTML MV播放器代碼
在網站開發中,我們經常需要使用視頻播放器來展示音樂或MV,這時候就需要用到HTML的MV播放器代碼。下面是一個示例的HTML MV播放器代碼:
這是一個HTML MV播放器代碼的示例:
<div id="mv"> <video id="video" width="600" height="400"> <source src="mymv.mp4" type="video/mp4"> <source src="mymv.webm" type="video/webm"> <p>您的瀏覽器不支持 HTML5 video.</p> </video> <div id="controls"> <button id="playBtn"></button> <button id="stopBtn"></button> <div id="progressBar"></div> </div> </div> <script> var video = document.getElementById("video"); var playBtn = document.getElementById("playBtn"); var stopBtn = document.getElementById("stopBtn"); var progressBar = document.getElementById("progressBar"); playBtn.addEventListener("click", function() { if (video.paused) { video.play(); } else { video.pause(); } }); stopBtn.addEventListener("click", function() { video.currentTime = 0; video.pause(); }); video.addEventListener("timeupdate", function() { var percent = Math.floor((100 / video.duration) * video.currentTime); progressBar.style.width = percent + "%"; }); </script>這段代碼展示了如何創建一個MV播放器,使用HTML5 video標簽表示視頻,包含播放、暫停、停止等控制按鈕,以及進度條。使用JavaScript實現控制按鈕的交互,并監測視頻播放進度來更新進度條的長度。 以上就是一個簡單的HTML MV播放器代碼示例,你可以按照需求來修改外觀或者添加新的功能。
上一篇mysql古詩