HTML5學習之視頻與音頻(三)

來源:互聯網
上載者:User

標籤:style   blog   http   color   java   io   檔案   ar   

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

 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.