H5中video的一些操作
阿新 • • 發佈：2021-11-27
程式碼演示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hangge.com</title> </head> <style> #durationBar{ border:solid 1px #164900; width:100%; margin-bottom:5px; } #positionBar{ height:20px; color:white; font-weight:bold; background:#2D9900; text-align:center; } </style> <script> //播放 function play(){ var video = document.getElementById("videoPlayer"); video.play(); } //暫停 function pause(){ var video = document.getElementById("videoPlayer"); video.pause(); } //停止 function stop(){ var video = document.getElementById("videoPlayer"); video.pause(); video.currentTime = 0; } //快放 function speedUp(){ var video = document.getElementById("videoPlayer"); video.play(); video.playbackRate = 2; } //慢放 function slowDown(){ var video = document.getElementById("videoPlayer"); video.play(); video.playbackRate = 0.5; } //正常速度 function normalSpeed(){ var video = document.getElementById("videoPlayer"); video.play(); video.playbackRate = 1; } //進度條相關 function progressUpdate(){ var video = document.getElementById("videoPlayer"); //動態設定進度條 var postionBar = document.getElementById("positionBar"); postionBar.style.width = (video.currentTime / video.duration * 100) + "%"; //設定播放時間 displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒"; } </script> <body> <video id="videoPlayer" src="hangge.mp4" width="400" height="300" ontimeupdate="progressUpdate()"> </video> <div id="durationBar"> <div id="positionBar"><span id="displayStatus">0秒</span></div> </div> <button onclick="play()">播放</button> <button onclick="pause()">暫停</button> <button onclick="stop()">停止</button> <button onclick="speedUp()">快放</button> <button onclick="slowDown()">慢放</button> <button onclick="normalSpeed()">正常</button> </body> </html>
注意、
- 動態播放/暫停時一定要加get(0)
video.get(0).paly();
video.get(0).paused();