HTML5 & JavaScript 程式開發實戰修練(4/5)

2013-07-05

摘要:HTML5 & JavaScript 程式開發實戰修練(4/5)

在html5 下;撥放影音更為簡單了~以下為htm5撥放範例及整理


<!DOCTYPE html>
<html>	
	<script type="text/javascript">
	    //設定撥放影片
	    function fun1() {
	        document.getElementById("video1").play();
	    }
	    //設定暫停影片
	    function fun2() {
	        document.getElementById("video1").pause();
	    }
	    //設定影片靜音
	    //volume 0.0=  0%
	    //       0.5= 50%
        //       .... 
        //       1.0=100%
	    function fun3() {
	        document.getElementById("video1").muted = true;
	        document.getElementById("video1").volume = 0.0;
	    }
	    //設定影片音量MAX;
	    function fun4() {
	        document.getElementById("video1").muted = false;
	        document.getElementById("video1").volume = 1.0;
	    }
	    //影片目前撥放/設定進度;以秒為單位
        //影片跳到100秒處
	    function fun5() {
	        document.getElementById("video1").currentTime = 100;
	    }
	</script>
<body>
    <! -- video Tag設定撥放影片檔案 -->
    <! -- src屬性設定影片檔案來源URL -->
    <! -- controls屬性設定控制面板 -->
    <! -- loop屬性設定循環撥放 -->
    <! -- autoplay屬性設定自動撥放 -->
    <! -- 你瀏覽器瀏覽不支援撥放此頁面影音程式;可自定義告知使用者瀏覽器不支援Html5語法 -->
    <video id="video1" src = "http://abc.com/a1.mov" controls loop autoplay>你瀏覽器瀏覽不支援撥放此頁面影音程式</video>
    <! -- audio Tag設定撥放聲音檔案 -->
    <audio id="audio1" src = "http://abc.com/a1.wav" controls loop autoplay>你瀏覽器瀏覽不支援撥放此頁面影音程式</audio>
     <br />
    <button onclick="fun1();">撥放</button>    
    <button onclick="fun2();">暫停</button>    
    <button onclick="fun3();">靜音</button>
    <button onclick="fun4();">音量MAX</button>
    <button onclick="fun5();">跳到100秒</button>
</body>
</html>

回首頁