02.HTML5(Video+DOM)

黑夜路口發表於2018-03-20
HTMLIDE

大多數基礎內容來自W3CSchool

HTML5 <video> 元素同樣擁有方法、屬性和事件

其中的方法用於播放、暫停以及載入等。其中的屬性（比如時長、音量等）可以被讀取或設定。其中的 DOM 事件能夠通知您，比方說，<video> 元素開始播放、已暫停，已停止，等等。

下例中簡單的方法，向我們演示瞭如何使用 <video> 元素，讀取並設定屬性，以及如何呼叫方法。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<body>

<div style="text-align:center;">
    <button onclick="playPause()">播放/暫停</button>
    <button onclick="makeBig()">大</button>
    <button onclick="makeNormal()">中</button>
    <button onclick="makeSmall()">小</button>
    <button onclick="seeking()">center</button>
    <button onclick="duration()">duration</button>
    <br/>
    <video controls="controls" id="video1" width="420" style="margin-top:15px;">
        <!--Html5 Video 可以新增多個source源來進行相容適配,這樣,當第一個源讀取出問題時會自動讀取下一個源. 如果a有問題，則播放b
        這樣一個出錯時會自動讀取另一個可用源(因為不同瀏覽器,支援的格式是不一樣的)-->
        <source src="a.mp4" type="video/mp4"  controls="controls"/>
        <source src="b.mp4" type="video/mp4"  controls="controls"/>
        Your browser does not support HTML5 video.
    </video>

</div>

<script type="text/javascript">
    var myVideo=document.getElementById("video1");

    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }

    function makeBig()
    {
        myVideo.width=560;
    }

    function makeSmall()
    {
        myVideo.width=320;
    }

    function makeNormal()
    {
        myVideo.width=420;
    }
    function seeking()
    {
        alert(myVideo.seeking);
    }
    function duration()
    {
        //視訊長度
        alert(myVideo.duration);
    }
</script>

</body>
</html>