ag棋牌是哪里的公司

書名：構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）
作者名：常新峰
本章字數： 1776字
更新時間： 2020-11-29 00:14:07

3.1 音頻視頻

本節我們先介紹一下音頻與視頻的基本知識、HTML 5技術下使用音頻（<audio>標簽）與視頻（<video>標簽）的基本方法，讓讀者對HTML 5的音頻與視頻技術有一個初步的了解。

3.1.1 音頻視頻的格式

MP4格式在日常生活中已經隨處可見，但是大家對WebM和Ogv應該還有點陌生。WebM是一個開放、免費的媒體文件格式，最早由谷歌提出，該格式容器中包括了VP8和Ogg Vorbis音軌。WebM格式效率非常高，可以在平板電腦和其他一些手持設備上流暢地使用。Ogv即帶有Thedora視頻編碼和Vorbis音頻編碼的Ogg文件，該格式文件帶有不確定的版權問題，可能在未來的瀏覽器中被慢慢淘汰。

各種格式的優缺點不一，如WebM格式，依賴于Google和YouTube的推廣，并且在硬件上有良好的支持，但是由于涉及MPEG LA的專利案件，并且在iOS設備上得不到支持，雖然傳統視頻和音頻編碼技術經歷多年的發展，并且相當穩定，但對于瀏覽器中原生支持視頻和音頻還非常年輕，仍然會遇到重重阻礙，不過規范和標準日益完善，如果讀者及早地在視頻和音頻上做好技術準備，在未來會得到加倍的回報。

3.1.2 使用video/audio元素

HTML 5除了提供audio和video元素播放音頻和視頻資源外，同時還配套提供了一系列的方法、屬性和事件，這些方法、屬性和事件允許使用JavaScript操作audio和video對象。

audio和video對象均提供了一些類似的方法，如表3-1所示。

表3-1 audio和video對象方法

下面通過一個簡單的視頻播放示例介紹部分API的使用。

【代碼3-1】

        01    <! DOCTYPE HTML>
        02    <html>
        03    <body>
        04    <video src="video.webm" width="480" height="320" controls></video>
            // 視頻播放元素
        05        <a href="; " class="play">播放</a>                    // 播放按鈕
        06        <a href="; " class="pause">暫停</a>                   // 暫停按鈕
        07         </body>
        08         <script>
        09        var video = document.querySelector('video');     // 獲取視頻元素
        10         document.querySelector('a.play'), .addEventListener('click', function(e){
                // 監聽播放按鈕點擊事件
        11        e.preventDefault();                                              // 阻止元素默認事件
        12        video.play();                                                    // 播放視頻
        13         }, false);
        14         document.querySelector('a.pause').addEventListener('click', function(e){
                // 監聽暫停按鈕點擊事件
        15        e.preventDefault();                                              // 阻止元素默認事件
        16        video.pause ();                                                  // 暫停視頻
        17         }, false);
        18         </script>
        19    </html>

該示例是一個最基本的使用JavaScript操作視頻元素的例子，其中用到了2個關鍵方法play和pause。audio和video元素除了新增許多新的方法外，同時還增加了諸多屬性，如表3-2所示。

表3-2 audio和video元素屬性

在實際的開發中，使用JavaScript操作視頻音頻元素往往會遇到很多瀏覽器的差異，這些問題在本章對應的示例章節會給出相應的解決方案，同時讀者可以使用市面目前比較成熟的第三方視頻音頻類庫解決兼容問題，如目前比較流行的基于HTML 5的類庫video.js，官網地址http://www.videojs.com/。

3.1.3 音頻視頻的通信

音視頻的實時通信即HTML 5的WebRTC技術，是Web Real-Time Communication的縮寫，該技術主要用于支持瀏覽器進行實時的語音對話和視頻通信。

在2011年之前，瀏覽器實現語音對話和視頻通信技術需要通過安裝插件或者客戶端等一些技術實現，不論對于用戶還是開發人員都是一個煩瑣和復雜的過程，并且還受到各種專利的影響。谷歌公司在2010年收購了Global IP Solutions公司從而獲得了WebRTC技術，在2011年，按照BSD協議把該技術開源，同年W3C將WebRTC技術納入HTML 5成為標準的一部分。最新Android系統上的Chrome版本也加入了WebRTC技術。

WebRTC技術可以讓Web開發者輕松地基于瀏覽器開發出豐富的實時媒體應用，幫助網頁應用開發語音通話、視頻聊天、P2P文件分享等功能，而不需要安裝任何插件，同時開發者也不需要關心多媒體的數字信號處理過程，只需要使用JavaScript即可實現。圖3.1為WebRTC的技術架構圖。

圖3.1 WebRTC的技術架構圖

WebRTC技術由以下3部分組成。

● MediaStream：本地的音頻視頻流或來自遠端瀏覽器的音頻視頻流。

● PeerConnection：執行音頻視頻調用，支持加密和帶寬控制。

● DataChannel：采用點對點傳輸，傳輸常規數據。

下面通過一個示例演示如何使用瀏覽器WebRTC，代碼如下：

【代碼3-2】

        01    <! DOCTYPE html>
        02    <html>
        03    <body>
        04     <video autoplay></video>             <! -- 視頻播放元素 -->
        05      <script>
        06        try {                                  // 使用WebKit核心下的getUserMedia方法
        07         navigator.webkitGetUserMedia({audio: true, video: true},
                  uccessCallback, errorCallback);
        08         } catch (e) {
        09         navigator.webkitGetUserMedia("video, audio", successCallback,
                  errorCallback);
        10         }
        11        function successCallback(stream) {             // 成功回調并設置video元素
        12         document.querySelector('video').src = window.webkitURL.
                  createObjectURL(stream);
        13         }
        14        function errorCallback(error) {                // 失敗回調返回錯誤信息
        15             console.log(’發生錯誤，編號：' + error.code);
        16         }
        17         </script>
        18    </body>
        19    </html>

將上述代碼保存至后綴為html的文件，并放置于Web服務器，如IIS、Apache、Nginx等。使用最新Chrome瀏覽器打開頁面地址，瀏覽器會提示是否啟用攝像頭和麥克風，如圖3.2所示。

圖3.2 瀏覽器提示是否啟用攝像頭和麥克風

點擊瀏覽器提示條中的“允許”按鈕，此時瀏覽器內出現一個寬640像素、高480像素的視頻窗口，顯示內容為用戶攝像頭拍攝視頻。

隨著WebRTC的發展和各大技術巨頭的支持，雖然標準尚未完全成熟，但足以給開發者代碼前所未有的驚喜，Web開發人員可以完全基于瀏覽器開發音頻視頻實時在線應用。目前，已經出現了一批頗具實力的類庫，如webRTC.io和WebRTC-Experiment等，用戶可以前往項目地址學習使用，地址分別為https://github.com/webRTC/webRTC.io和https://github.com/muazkhan/WebRTC-Experiment。

提示

BSD是Berkeley Software Distribution的縮寫，中文意思為伯克利軟件發行版，是一整套軟件發行版的統稱，是自由軟件中使用最廣泛的許可證之一。BSD的最初所有者是加州大學董事會。該協議可以自由地使用并修改源代碼，也可以將修改后的代碼作為開源或者專利軟件再發布。

官术网_书友最值得收藏!

構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）

3.1 音頻視頻

3.1.1 音頻視頻的格式

3.1.2 使用video/audio元素

3.1.3 音頻視頻的通信