HTML5開發技術如今可謂是一門非常火，非常有發展前途的技術，如今的各大公司企業都會高薪聘請專業的HTML5開發人才，因此就使得HTML5在如今的市場上擁有著非同一般的地位，所以現在參加武漢HTML5培訓的人一直不斷的增加。雖然現在HTML5開發很火，但是始終有一份的技術HTML5還沒有實現，下面就和千鋒武漢HTML5培訓小編一塊來看一下沒有實現的HTML5技術有哪些。

1、HTML5上無法實現視頻的全屏播放

使用插件全屏觀看視頻是沒有問題的。但是，如果是使用HTML5，這可能還有點困難(至少是現在)。但針對這一問題，現在已經有一些相關的支持協議了。Chris Pearce在Thundering Herd博客中介紹了他是如何使用HTML全屏API在Firefox上實現視頻的全屏播放的。這個API提供了“全屏”的HTML組件。Chrome上也有相關的解決方案。

2、HTML5無法實現DRM

如果你有一家多媒體公司，你需要控制或者限制你的視頻內容——通常是在多媒體內容中添加數字版權加密技術(DRM)。不幸的是，HTML5無法加入DRM。HTML5的問題是，它會將多媒體內容的格式完全暴露出來，要解決這個問題并不困難(相關的技術和策略可以在W3C bug system上看到)。我個人認為，這個問題確實有必要解決。拋開各界對DRM的爭議，至少對許多公司而言，支持DRM還是非常有意義的——看看Lovefilm的blog，你就知道目前各個多媒體公司面臨的困難了。

3、HTML5上不能與攝像頭交互

與Flash有所不同，HTML5不支持用戶與攝像頭交互(或者是PC機上的麥克風)，這使得基于web的會議很難實現。當然也不是完全沒有辦法，在HTML5Labs上，你可以找到一個Media Capture API的相關標準，它是W3C標準中有關音頻處理的部分。HTML5Labs是由最早的Microsoft標準和一些web標準(如W3C)演化而來的。所以它目前還處在發展之中，一旦音頻處理問題解決了，就開始著手解決視頻問題了。你可以在HTML5Labs網站上找到許多相關的資料。

4、HTML5上的音頻處理也不完美

你也許會認為：既然HTML5都能夠解決視頻播放問題了，那音頻播放自然不在話下咯。但音頻處理最大的問題就是怎樣處理延遲的問題。當你的應用程序或是游戲要求音頻文件與屏幕上顯示的操作保持同步時，這個問題就凸顯出來了。其中一個問題就是不同的瀏覽器處理音頻文件的方式可能也有所不同。如果想了解更多相關的信息，可以看看IE博客上的相關介紹，Grant Skinner的SoundJS Java library提供了一種不錯的解決方案。

5、HTML5不能播放直播視頻

HTML5已經能夠很好地處理靜態的視頻文件了，但它現在還無法處理直播的視頻。盡管HTML5能夠提供優質的視頻查詢和視頻點播服務，但是它卻無法支持用戶觀看在線的足球比賽。Apple使用HTTP Live Streaming彌補了HTML5的這一缺失，它通過HTTP傳輸H.264的文件塊，但是這一技術只能在Safari上運行。(順便提一句，有些人以為HTML5不支持視頻的隨機播放，但其實HTML5是支持這一功能的。)Streaming Media雜志的網站上能夠找到非常豐富的HTML5視頻資源。

當然了沒實現并不代表實現不了，HTML5發展空間很大，我們相信不久的將來一定可以完美的解決以上的問題，我們也絲毫不必擔心想從事HTML5開發前景不夠好，我更相信HTML5才剛剛開局。HTML5的未來十分光明，趕快去學習HTML5開發吧。

TML5的權限越來越大了，瀏覽器可以直接調用攝像頭、麥克風了，好激動啊。我們要用純潔的HTML代碼造出自己的天地。

視頻采集

本篇介紹的栗子 都是在chrome 47 版本以上的，低版本的可能會出現白屏和錯誤。

1.安全環境

隨著Chrome版本的升高，安全性問題也越來越被重視，較新版本的Chrome瀏覽器在調用一些API時需要頁面處在安全環境中。本篇文章所介紹的API函數，都需要在安全環境中執行。如果處在非安全環境下 ( http頁面 ) 這些API就會有意想不到的問題。

比如 getUserMedia()就會報出警告，并執行出錯。

而在設備枚舉enumerateDevices()時，雖然不會報錯，但是他隱藏了設備label。

注意：第一次在一個安全頁面下執行enumerateDevices()時也會隱藏label，在允許使用攝像頭等設備后，第二次執行才會顯示label。

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. Seehttps://goo.gl/rStTGz for more details.

根據谷歌的意思，常用的安全環境有如下

• http://localhost

• http://127.0.0.1

• https 開頭的地址頁面

如果你做了一個視頻測試的頁面，想嘚瑟給局域網的其他人，但是又沒有域名證書怎么辦？

這時候只能通過修改其他人的hosts文件了

比如你的測試服務器IP地址是192.168.2.18，那么其他人的hosts文件修改如下：

#localhost 127.0.0.1

localhost 192.168.2.18

當使用別人的Chrome瀏覽器訪問 http://localhost/[getUserMediaTestPage]時，就會順利的執行這些API了。

但是移動端的瀏覽器并不認localhost，就算你修改了hosts ，移動端的瀏覽器根本不理你，解析都不解析。

所以想在手機上測試，只能老老實實申請個證書了。

2.設備枚舉

在開啟攝像頭之前，先要把可以使用的麥克風和攝像頭 ( 輸入設備 ) 列出來，如果沒有這兩樣設備也就無法繼續。

代碼如下:

<label for="audioDevice"> 錄音設備: </label>

<select id="audioDevice">

</select>

<br>

<label for="videoDevice"> 錄影設備: </label>

<select id="videoDevice">

</select>

<script>

navigator.mediaDevices.enumerateDevices().then(function (data) {

data.forEach(function (item) {

if(item.kind=="audioinput"){ //麥克風

document.getElementById("audioDevice").innerHTML +="<option value='"+ item.deviceId +"'>" + item.label + " </option> "

}else if(item.kind=="videoinput"){ //攝像頭

document.getElementById("videoDevice").innerHTML +="<option value='"+ item.deviceId +"'>" + item.label + " </option> "

}

})

},function (error) {

console.log(error);

})

</script>

效果如下圖，和瀏覽器自己獲取的一模一樣。

注意：上圖的實例中，瀏覽器地址欄最右邊的攝像頭標識是需要使用 getUserMedia()函數時才會出現。

<script>

var getUserMedia=navigator.webkitGetUserMedia; //Chrome瀏覽器的方法

getUserMedia.call(navigator, {

video:true, // 開啟音頻

audio:true // 開啟視頻

}, function(stream){

console.log(stream); // 成功獲取媒體流

}, function(error){

//處理媒體流創建失敗錯誤

});

</script>

這時候可以通過瀏覽器給出的菜單下拉選擇設備。

3.設置參數，預覽

我們可以通過代碼來指定使用哪個攝像頭和麥克風設備。

也可以通過代碼設置視頻的寬、高和幀率。

代碼如下：

<video id="video" autoplay></video> <!-- 一定要有 autoplay -->

<script>

var getUserMedia=navigator.webkitGetUserMedia ;

getUserMedia.call(navigator, {

"audio":{

"mandatory":{

"sourceId":"" // 指定設備的 deviceId

}

},

"video":{

"optional":[

{"minWidth":400},

{"maxWidth":400}, // 數字類型，固定寬度

{"minHeight":220}，

{"maxHeight":220}, // 數字類型，固定高度

{"frameRate":"12"} // 幀率

],"mandatory":{

"sourceId":"" // 指定設備的 deviceId

}

}

}, function(stream){

//綁定本地媒體流到video標簽用于輸出

document.getElementById("video").src=URL.createObjectURL(stream);

}, function(error){

//處理媒體流創建失敗錯誤

});

</script>

輸出的視頻流通過blob對象鏈接綁定到video標簽輸出。

這個deviceId就是從上文設備枚舉 enumerateDevices() 獲取到的。

兩種設備，如果有一個deviceId填寫不正確，就會報出一個DevicesNotFoundError的錯誤。

而且一旦指定了設備后，瀏覽器自己的設備選擇就會變成灰色不可選。

視頻的寬高，并不會因為填寫的數值比例不合法而失真。

比如你設定了寬度30，高度100，那么他會從視頻中心截取 30x100 的畫面，而不是把原畫面擠壓到這個30x100的尺寸。

效果如下：

如果您的預覽一片漆黑，或者只有一個小黑點，那么說明您的攝像頭正在被占用...

吐槽：這個getUserMedia()函數的參數，w3的官方文檔鏈接如下：

https://www.w3.org/TR/mediacapture-streams/

可是Chrome并沒有遵循它，而且差距還挺大...

視頻保存

1. 格式支持

Chrome瀏覽器是大力推廣webm的視頻格式的。可以用MediaRecorder.isTypeSupported("video/webm")來測試是否支持這種類型的編碼。

如果返回true，那么我們錄制的視頻就可以被保存為這種指定的格式。

如果不指定，那么將會使用瀏覽器自動指定的文件格式。文檔原話如下

If this paramater is not specified, the UA will use a platform-specific default format.

但是這個默認值卻無法直接獲取，全靠猜...

2. 視頻錄制 MediaRecorder

我們使用 MediaRecorder來錄制視頻，參數是通過getUserMedia()獲取的媒體流。

• 通過綁定ondataavailable事件，來獲取視頻片段數據，并在內存中累積。

• 錄制的開始和結束分別使用 start和stop 函數。

• 執行start之后會周期性觸發ondataavailable事件。

• 執行stop之后會停止觸發ondataavailable事件。

• 錄制結束后，把累計的片段數據保存為blob對象，并從瀏覽器下載存為視頻文件。

代碼如下：

<script>

var getUserMedia=navigator.webkitGetUserMedia ;

var g_stream=null, g_recorder=null;

function startPreview(){

getUserMedia.call(navigator, {

video:true,

audio:true

}, function(stream){

g_stream=stream;

}, function(error){

});

}

function stopRecording(){

g_recorder.stop();

}

function startRecording(){

var chunks=[];

g_recorder=new MediaRecorder(g_stream,{mimeType:"video/webm"});

g_recorder.ondataavailable=function(e) {

chunks.push(e.data);

}

g_recorder.onstop=function(e) {

var blob=new Blob(chunks, { 'type' : 'video/webm' });

var audioURL=URL.createObjectURL(blob);

window.open(audioURL);

}

g_recorder.start();

}

</script>

注意：本例并沒有填寫視頻文件頭，所以保存出來的視頻文件沒有時間軌，無法快進和跳躍。可以用格式工廠轉

“莫基了”上面有一個錄制音頻的例子 傳送門：http://t.cn/RvxZAeo

這篇文章的DEMO請戳 這里：http://t.cn/RVt9Q6I

?―――――――――↓―――――――――?

相關閱讀

多屏互動——H5中級進階
前端，想說愛你不容易！
無需Flash實現圖片裁剪——HTML5中級進階

作者信息

作者來自力譜宿云 LeapCloud 團隊_UX成員：王詩詩 【原創】
力譜宿云 LeapCloud 團隊首發：https://blog.maxleap.cn/archives/1197
歡迎關注微信訂閱號：MaxLeap_yidongyanfa

pera 瀏覽器

Opera 瀏覽器是免費的，它是目前最小最快的瀏覽器！

Opera 是作為挪威電信公司 Telenor 的一個研究項目于 1994 年啟動的，并于 1995 發展為一個獨立的開發公司，Opera Software ASA。

Opera Software ASA 研發了 Opera web 瀏覽器，是桌面和設備市場的 web 瀏覽器開發領域的業界領導者。

Opera 瀏覽器由于其較之其他瀏覽器具有更快、更小且標準兼容性更強的優點，已經得到來自終端用戶和業界的國際性贊譽。

下載Opera

Opera 統計

下表是 瀏覽器統計信息 中關于 Opera 使用情況的細節：

Opera 不僅免費而且符合 Web 標準！

Opera 瀏覽器是免費的！早期的旗幟廣告和許可費制度已經被撤銷了！

Opera 瀏覽器具有更快、更小且標準兼容性性更強的優點。

如果您的網站在 Opera 中運行良好，那么可以確定它符合標準！只需要用符合標準的代碼來編寫您的頁面，就可確保您的網站運行良好，不論是在所有主流瀏覽器中，還是在所有主流平臺以及操作系統上。

Opera 支持所有在用的 Web 標準，諸如 CSS、HTML、XHTML、HTTP、DOM、XML、XSL、ECMAScript（JavaScript）、PNG、WML、SVG、Unicode、Unicode Bidirectional Algorithm 等等。

Opera 20

Opera 20 于 2014 年 3 月 4 日發布，包括更新到最新的 Chromium 版本 33。

Opera 20 可以在 Mac 和 Windows 上運行。

新特性：

• 可拖拽的書簽 - 拖拽您的標簽到書簽欄，可以保存這些標簽。拖拽您的書簽到快速撥號（Speed Dial），可以創建新的條目。

• 新的快速撥號（Speed Dial）條目 - 在高級設置中，可以改變快速撥號（Speed Dial）條目的外觀。

Opera 19

Opera 19 于 2014 年 1 月 28 日發布，包括更新到最新的 Chromium 版本 32。

Opera 19 可以在 Mac 和 Windows 上運行。

新特性：

• 書簽欄 - 可以保存標簽到書簽欄，可以很方便地管理書簽欄里邊的標簽，還可以很容易地點擊書簽欄中標簽來訪問網頁。

• 主題創建 - 上傳圖像或者使用來自網絡上的圖像來自定義瀏覽器的外觀。

Opera 18

Opera 18 于 2013 年 11 月 19 日發布，包括更新到最新的 Chromium 版本 31。

Opera 18 可以在 Mac 和 Windows 上運行。

新特性：

• 媒體訪問 - 允許網站訪問您的相機和麥克風，包括對 HTML5 媒體訪問的支持。

• 主題 - 可以通過主題管理器安裝來自 addons.opera.com 上的主題。

• 搖桿（Rocker）手勢 - 通過在鼠標按鈕上移動您的手指，來向前/向后導航標簽的歷史。

• 增強標簽的功能 - 您可以在打開的窗口之間拖拽標簽。

Opera 17

Opera 17 于 2013 年 10 月 10 日發布，包括更新到最新的 Chromium 版本 30。

Opera 17 可以在 Mac 和 Windows 上運行。

新特性：

• 固定標簽 - 允許您固定標簽到標簽欄上（有助于防止您意外關閉標簽）。

• 自定義搜索 - 您可以添加自定義搜索引擎到聯合搜索和地址欄。

Opera 16

Opera 16 于 2013 年 8 月 27 日發布，包括更新到最新的 Chromium 版本 29。

Opera 16 可以在 Mac 和 Windows 上運行。

新特性：

• 自動填充 - 您可以安全地存儲在線使用的地址、電話號碼、電子郵件地址和信用卡。

• 地理位置 - 您可以通過網站分享您的位置信息。

Opera 15

Opera 15 于 2013 年 7 月 2 日發布。

Opera 15 可以在 Mac 和 Windows 上運行。

Opera 15 是 Opera 的一個重大的再造。瀏覽器的源代碼是基于 Chromium 和 Blink，以及 WebKit 渲染引擎。這個版本的瀏覽器的一切都是新的：

• 新的渲染引擎，基于 WebKit

• 新的用戶界面

• 新的能力

• 新的特性

• 改進的站點兼容性

• 自動更新

新特性：

• 組合的地址與搜索欄

• 增強的快速撥號（Speed Dial） - 允許您將快速撥號條目分組。

• 儲備特性 - 記錄位置、元數據、網頁截圖，并把這些信息放置在瀏覽器起始頁上的可折疊列表項中，可以通過關鍵字搜索，也可以通過截圖進行可視化瀏覽。

• 獲得知識 - 顯示新聞和專題內容，可以通過類別或位置/語言進行過濾。

• 越野（Off-Road）模式 - 采用 Opera Mobile 所使用的服務器端壓縮技術。

Opera 12

Opera 12 于 2012 年 6 月 13 日發布。

Opera 12 可以在 Linux、Mac、FreeBSD 和 Windows 上運行。

新特性：

• 改進的速度

• 支持拍照 - 第一個支持 W3C getUserMedia 規范的瀏覽器。

• 主題 - Opera 12 引進了輕量級的主題。

• 更好的安全徽章

• 改進對 HTML5 和 CSS3 的支持 - 比如 HTML5 拖放、CSS3 過渡和動畫。

• 新增 5 種新的語言 - 阿拉伯語（Arabic）、波斯語（Persian）、烏爾都語（Urdu）、希伯萊語（Hebrew）和哈薩克語（Kazakh）。

• 一個頁面縮放滑塊

• 支持不跟蹤

Opera 11.60

Opera 11.60 于 2011 年 12 月 6 日發布。

Opera 11.60 可以在 Linux、Mac、FreeBSD 和 Windows 上運行。

新特性：

• 新的瀏覽器引擎 - 更快和更穩定的互聯網體驗。

• 新的郵件設計 - 更簡潔的布局，消息分組，更方便的導航，在收件箱中更直觀的視圖。

• 修改地址字段 - 只需要按下地址欄中的星號，即可添加頁面到書簽或者快速撥號（Speed Dial）中

• 改進對 HTML5、CSS3、SVG 的支持。

Opera 11.50

Opera 11.50 于 2011 年 6 月 28 日發布。

Opera 11.50 可以在 Linux、Mac、FreeBSD 和 Windows 上運行。

新特性：

• 時尚的用戶界面

• 為 Opera 的快速撥號（Speed Dial）特性添加功能 - 通過擴展嵌入您的快速撥號（Speed Dial），讓您可以即時更新，而不需要通過添加縮略圖鏈接到收藏夾中。

• 密碼同步 - 讓您與其他 Opera 瀏覽器安全地同步密碼。

• 更快的圖形性能

• 改進對 HTML5、CSS3、SVG 的支持

Opera 11.10

Opera 11.10 于 2011 年 4 月發布。

Opera 11.10 可以在 Linux、Mac、FreeBSD 和 Windows 上運行。

新特性：

• Speed Dial 2.0 - 可以更清晰地預覽您喜愛的網頁，并且可以動態顯示網站最新的內容。快速撥號項的使用數量不做限制。

• 增強的 Opera Turbo - 在擁擠的 Wi-Fi 熱點地區，或者在使用移動電話或撥號連接時，提高您的瀏覽速度。

• 簡單的插件安裝 - 在這個版本中，最流行的插件，Adobe Flash Player，可以無縫自動安裝。

• 新的 CSS3 支持 - Opera 現在支持 CSS3 線性漸變和多列。

Opera 11

Opera 11 于 2010 年 12 月發布。

Opera 11 可以在 Linux、Mac、FreeBSD 和 Windows 上運行。

新特性：

• Opera Presto 2.7 渲染引擎 - 更好地支持 CSS3 和 HTML5。

• 標簽堆疊 - 我們經常打開許多標簽，以致于難以調整和管理。Opera 11 讓您可以拖動一個標簽到另一個標簽上，用來創建標簽組。限制您可以讓打開的幾十個網頁有組織地顯示，且您可以很方便地進行調整和管理。

• 安全地址字段 - 一種改進的地址字段，使得它更容易在網絡上保持安全，并且它隱藏了長網絡地址的復雜性。同時它還提供了更安全的信息來幫助您在瀏覽時保持安全，只需要點擊網站的徽章就能看到您所訪問的網站的安全信息。

• 視覺鼠標手勢（Visual Mouse Gestures） - 通過鼠標的快速輕彈，即可完成常用的瀏覽器動作。在網頁上按住鼠標右鍵，會顯示一個指示如何執行可用手勢的視覺向導。

• 針對微軟 Windows 平臺的 Opera 安裝程序 - Opera 有一個新的安裝程序，比之前使用的 MSI 安裝程序快多了。

• 新的擴展 & 郵件面板 - 一堆新的擴展，一個新的右鍵面板，以便更加快速地使用電子郵件。

更舊的 Opera 版本

Opera 10.5 - 于 2010 年 3 月發布。

Opera 10.0 - 于 2009 年 9 月發布。

Opera 9.5 - 于 2008 年 6 月發布。

Opera 9.0 - 于 2006 年 6 月發布。

Opera 8.5 - 于 2005 年 9 月發布。

Opera 8.0 - 于 2005 年 4 月發布。