HTML5学习之视频与音频（三）

浏览数：16 / 时间：2015年06月09日

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <!--      当前，video 元素支持三种视频格式：
        格式        IE      Firefox    Opera    Chrome    Safari
        Ogg         No      3.5+       10.5+     5.0+      No
        MPEG4   　　9.0+     No         No        5.0+     3.0+
        WebM        No      4.0+       10.6+     6.0+      No
        Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
        MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
        WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件-->

    <!-- controls 让浏览器显示视频中的元素-->
    <video controls="controls" autoplay="autoplay" loop="loop" id="video1">
        <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" media="screen and (min-width:500px) " />
        <!--宽度小于500播放下面这个-->
        <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/mp4" media="screen" />
        Sorry,your browser is unable to play this video.
    </video>
    <section>
        <button onclick="playPause()">播放/暂停</button>
        <button onclick="makeBig()">大</button>
        <button onclick="makeNormal()">中</button>
        <button onclick="makeSmall()">小</button>
    </section>

    <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;
        }
    </script>
    
    <!--当前，audio 元素支持三种音频格式：
                            IE 9    Firefox 3.5    Opera 10.5    Chrome 3.0    Safari 3.0
        Ogg Vorbis                     √             √               √     
        MP3                  √                                       √              √
        Wav                            √             √                              √-->
    <audio src="http://www.w3school.com.cn/i/song.mp3" controls="controls" autoplay="autoplay">
        Your browser does not support the audio tag.
    </audio>
</body>
</html>