首页 > 代码库 > HTML5学习之视频与音频(三)

HTML5学习之视频与音频(三)

<!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>