天天看点

02.HTML5(Video + DOM)

大多数基础内容来自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>

           

继续阅读