<!doctype html>
<html>
<head></head>
<body>
<!--<video src="movie.webm" controls="controls">
您的破瀏覽器都是古董早該換了，不然休想看我們的激情小電影。
</video>
<hr />
多資源的視頻播放
<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
您的瀏覽器不支持視頻標籤，還不趕快升級。
</video>-->
<hr />
使用以下VIDEO標籤的API<br />
<video src="movie.webm" controls="controls" id="video">
您的破瀏覽器都是古董早該換了，不然休想看我們的激情小電影。
</video>
<br />
<button οnclick="bofang()">播放</button>
<button οnclick="zanting()">暫停</button>
<button οnclick="kuaijin()">快進10秒</button>
<button οnclick="kuaitui()">快退10秒</button>
<button οnclick="shutup(this)">閉嘴</button>
<button οnclick="soso()">加速播放</button>
<button οnclick="yu()">減速播放</button>
<button οnclick="normal()">正常播放</button>
<button οnclick="upper()">提高嗓門</button>
<button οnclick="lower()">降低嗓門</button>
<script>
//獲取對應的video標籤
var video=document.getElementById('video');
//播放方法
function bofang(){
video.play();
}
//暫停方法
function zanting(){
video.pause();
}
//快進10秒
function kuaijin(){
video.currentTime+=10;//相當於video.currentTime=video.currentTime+10
}
//快退10秒
function kuaitui(){
video.currentTime-=10;
}
//靜音按鈕
function shutup(obj){
if(video.muted){
obj.innerHTML="閉嘴";
video.muted=false;
}else{
obj.innerHTML="張嘴";
video.muted=true;
}
}
//加速播放(3倍速度)
function soso(){
video.playbackRate=3;
}
//慢速播放(慢三倍)
function yu(){
video.playbackRate=1/3;
}
//正常倍速
function normal(){
video.playbackRate=1;//默認的播放倍速是1
}
//調高聲音
function upper(){
video.volume+=0.2;//聲音值的範圍是0-1
}
//調低聲音
function lower(){
video.volume-=0.2;
}
</script>
<hr />
音頻標籤的使用<br />
<audio src="我的好兄弟.mp3" controls="controls">
您的老牛已經拉不動破車了，趕緊換了吧，想聽中國好聲音麼？
</audio>
</body>
</html>HTML5 02 音視頻介紹
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章