自己動手實現html5視訊播放器倍數播放功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿酷TONY--Tangni</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">播放/暫停</button>
<button onclick="makeBig()">放大</button>
<button onclick="makeSmall()">縮小</button>
<button onclick="makeNormal()">普通</button>
<button onclick="getPlaySpeed()" type="button">當前播放速度</button>
<button onclick="setPlaySpeed()" type="button">將視訊設定為2倍播放速度</button>
<br>
<video id="video" width="600" autoplay controls>
<source src="test.mp4" type="video/mp4">
TONY提示：您瀏覽器不支援 HTML5 video 標籤。 </video>
</div>
<script>
var myVideo=document.getElementById("video");
function getPlaySpeed() {
alert("當前視訊播放速度為："+myVideo.playbackRate);//獲取播放速度
}
function setPlaySpeed() {
alert("視訊將以2倍速度播放");//獲取播放速度
myVideo.playbackRate=2;//設定新的播放速度2倍速度
}
function playPause(){
if (myVideo.paused)
myVideo.play(); //播放
else
myVideo.pause(); //暫停播放
}
function makeBig(){
myVideo.width=660;
}
function makeSmall(){
myVideo.width=230;
}
function makeNormal(){
myVideo.width=400;
}
</script>
</body>
</html>