整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
了進(jìn)一步揭開HTML5的神秘面紗，并幫助這些惹人厭煩的設(shè)計(jì)師和開發(fā)人員加入到這個(gè)潮流中，我已經(jīng)列出了我們現(xiàn)在都應(yīng)該使用HTML5的十大理由。
所以你還沒有使用HTML5，是吧？我想你可能有你的理由; 它還沒有被完全采用，它在IE中不起作用，你不喜歡用戶，你失去了聯(lián)系，或者你只是熱愛編寫嚴(yán)格的XHTML代碼。HTML5是網(wǎng)絡(luò)所需要的革命，事實(shí)上，無論你喜不喜歡，它都會(huì)成為未來 - 吸引和處理。HTML5是不難理解和使用，并即使它尚未完全采納，仍然有足夠的理由開始使用它現(xiàn)在 - 就像您完成閱讀這篇文章之后。
有很多文章鼓吹使用HTML5并贊揚(yáng)它的好處，是的，這是另一個(gè)。隨著所有這些文章的推出，蘋果公司都在推出新的開發(fā)產(chǎn)品，而且還有許多網(wǎng)站專門為此開發(fā)了一些設(shè)計(jì)師和開發(fā)人員，他們并沒有或者不會(huì)采用的原因。我認(rèn)為主要的問題是，它似乎仍然是許多人的神秘生物。對(duì)許多人來說，它更像是噴氣式飛機(jī)或飛行器 - 這是一個(gè)很好玩的想法，但在使用上還是不實(shí)用。錯(cuò)了，現(xiàn)實(shí)是現(xiàn)在非常實(shí)際！這并不是最新的奔馳概念車被牽引到車展，車展，這是一個(gè)現(xiàn)實(shí)，它不會(huì)去任何地方。
為了進(jìn)一步揭開HTML5的神秘面紗，并幫助這些惹人厭煩的設(shè)計(jì)師和開發(fā)人員加入到這個(gè)潮流中，我已經(jīng)列出了我們現(xiàn)在都應(yīng)該使用HTML5的十大理由。對(duì)于那些目前使用HTML5的人來說，這個(gè)列表可能并不是什么新東西，也沒有什么突破，但是希望這會(huì)激勵(lì)你與社區(qū)中的其他人分享HTML5的好處。我們會(huì)做這個(gè)萊特曼倒計(jì)時(shí)的風(fēng)格（減去名人主持人），并從第十號(hào)開始 - 可訪問性。
10 - 可訪問性
HTML5使創(chuàng)建可訪問的站點(diǎn)更容易，主要有兩個(gè)原因：語義和ARIA。新的（一些當(dāng)前可用的）HTML標(biāo)題（如<header>，<footer>，<nav>，<section>，<aside>等）允許屏幕閱讀器輕松訪問內(nèi)容。之前，屏幕閱讀器無法確定給定的<div>，即使您為其分配了ID或Class。使用新的語義標(biāo)簽，屏幕閱讀器可以更好地檢查HTML文檔，為使用者創(chuàng)造更好的體驗(yàn)。
ARIA是一個(gè)W3C規(guī)范，主要用于為HTML文檔中的元素分配特定的“角色” - 本質(zhì)上通過角色屬性在頁面上創(chuàng)建重要的地標(biāo)：頁眉，頁腳，導(dǎo)航或文章。這個(gè)問題已經(jīng)被很好的忽略了，而且主要是因?yàn)樗鼪]有用，HTML5會(huì)驗(yàn)證這些屬性。而且，HTML5的內(nèi)置角色不會(huì)被過度占用，從而使得分配角色變得毫無意義。有關(guān)HTML5和ARIA的更深入討論，請(qǐng)?jiān)L問WAI。
9 - 視頻和音頻支持
忘記Flash Player和其他第三方媒體播放器，使用新的HTML5 <video>和<audio>標(biāo)簽，使您的視頻和音頻真正可訪問。讓媒體正常播放一直是一個(gè)噩夢(mèng)，你不得不使用<embed>和<object>標(biāo)簽，并分配一個(gè)巨大的參數(shù)列表來獲取正確的東西。您的媒體標(biāo)簽只是變成這些令人討厭的，巨大的混亂的代碼段。HTML5的視頻和音頻標(biāo)簽基本上將它們視為圖像; <video src=“url”/>。但是所有這些參數(shù)如高度，寬度和自動(dòng)播放呢？不用擔(dān)心我的好人，只需在標(biāo)簽中定義這些屬性就像其他任何HTML元素一樣：<video src=“url”width=“640px”height=“380px”autoplay />
實(shí)際上，這樣做很簡(jiǎn)單，但是因?yàn)槔闲皭旱臑g覽器不喜歡我們的HTML5朋友，所以你需要添加一些更多的代碼來讓它們正常工作......但是這個(gè)代碼并沒有那么粗糙和混亂<object>和<embed>標(biāo)簽：
< video poster=“myvideo.jpg” controls > < source src=“myvideo.m4v” type=“video / mp4” /> < source src=“myvideo.ogg” type=“video / ogg” /> < embed src=“/ to / my / video / player” > </ embed > </ video >
一些資源值得檢查：
HTML5音頻和視頻：你必須知道的
音頻和視頻處理
HTML5
如何在HTML5視頻上制作自己的視頻播放器
在現(xiàn)代瀏覽器中使用HTML5視頻和音頻
Browserscene：使用WebGL和HTML5音頻創(chuàng)建3D聲音可視化器
8 - Doctype
<！DOCTYPE html>
就是這樣，那就是文檔類型，沒有什么比這更重要的了。很簡(jiǎn)單的權(quán)利？沒有更多的切割和粘貼一些長(zhǎng)的不可讀的代碼行，沒有更多的骯臟的頭標(biāo)簽充滿文檔類型屬性。你可以簡(jiǎn)單，輕松地輸入并快樂。但是，真正偉大的事情，除了簡(jiǎn)單之外，它可以在每個(gè)瀏覽器中清除可怕的IE6。
7 - 清潔代碼
如果您對(duì)簡(jiǎn)單，優(yōu)雅，易于閱讀的代碼充滿激情，那么HTML5就是您的寵兒。HTML5允許您編寫清晰的描述性代碼，語義代碼，使您可以輕松地將意義與風(fēng)格和內(nèi)容分開?？紤]這個(gè)典型和簡(jiǎn)單的導(dǎo)航代碼：
<div id="header"> <h1>Header Text</h1> <div id="nav"> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div>/div>
所以這個(gè)代碼是相當(dāng)干凈和簡(jiǎn)單的？但是使用HTML5，你可以更清理這些，同時(shí)給你的標(biāo)記更多的含義：
<header> <h1>Header Text</h1> <nav> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </nav></header>
使用HTML5，您可以通過使用語義和HTML標(biāo)題來描述您的內(nèi)容，從而最終治愈您的“divitis”和“classitis”。以前，您通常只需要為每個(gè)內(nèi)容塊使用div，而不是在其上放置一個(gè)id或class來描述其內(nèi)容，但使用新的<section>，<article>，<header>，<footer>，<aside>和<nav >標(biāo)記，HTML5允許您編寫標(biāo)記清理程序以及讓您的CSS更好地組織和快樂。
一些資源值得檢查：
HTML5 Boilerplate
6 - 更智能的存儲(chǔ)
HTML5最酷的事情之一是新的本地存儲(chǔ)功能。這是常規(guī)舊cookies和客戶端數(shù)據(jù)庫之間的一點(diǎn)點(diǎn)交叉。它比cookies更好，因?yàn)樗试S跨多個(gè)窗口進(jìn)行存儲(chǔ)，它具有更好的安全性和性能，并且即使在瀏覽器關(guān)閉之后，數(shù)據(jù)仍將保留。因?yàn)樗举|(zhì)上是一個(gè)客戶端數(shù)據(jù)庫，所以您不必?fù)?dān)心用戶刪除cookies，并被所有流行的瀏覽器所采用。
本地存儲(chǔ)對(duì)于很多事情來說都很棒，但是它是HTML5工具之一，它可以在沒有第三方插件的情況下使網(wǎng)絡(luò)應(yīng)用成為可能。能夠?qū)?shù)據(jù)存儲(chǔ)在用戶的瀏覽器中，使您可以輕松創(chuàng)建這些應(yīng)用程序功能，如：存儲(chǔ)用戶信息，緩存數(shù)據(jù)的能力以及加載用戶以前的應(yīng)用程序狀態(tài)的能力。如果您有興趣開始使用本地存儲(chǔ)，請(qǐng)查看Christian Heilmann去年發(fā)布的偉大的24 Ways文章 - 使用HTML5本地存儲(chǔ)包裝好東西。
還有一些值得檢查的資源：
以簡(jiǎn)單的HTML5方式存儲(chǔ)數(shù)據(jù)（以及一些你可能不知道的技巧）
快速提示：了解HTML5本地存儲(chǔ)
HTML5本地存儲(chǔ)
5有關(guān)HTML5 LocalStorage的隱晦信息
5 - 更好的相互作用
敬畏，我們都希望更好的互動(dòng)，我們都想要一個(gè)更具動(dòng)感的網(wǎng)站，回應(yīng)用戶，并允許用戶享受/互動(dòng)您的內(nèi)容，而不是只看它。輸入<canvas>，這是繪制HTML5標(biāo)記，它允許您執(zhí)行大多數(shù)（如果不是更多）互動(dòng)和動(dòng)畫的可能性，而不是像Flash之類的以前的富互聯(lián)網(wǎng)應(yīng)用程序平臺(tái)。
除了<canvas>以外，HTML5還附帶了許多優(yōu)秀的API，可以讓您創(chuàng)建更好的用戶體驗(yàn)和更強(qiáng)大，更動(dòng)態(tài)的Web應(yīng)用程序 - 以下是本機(jī)API的快速列表：
拖放（DnD）
脫機(jī)存儲(chǔ)數(shù)據(jù)庫
瀏覽器歷史管理
文件編輯
定時(shí)媒體播放
有關(guān)這些API的更多信息以及HTML5的更多原生交互功能，請(qǐng)?jiān)L問HTML5Doctor。
一些資源值得檢查：
哈基姆的實(shí)驗(yàn)
里卡多的作品
HTML5畫布和音頻實(shí)驗(yàn)
球池
HTML5視頻銷毀
社會(huì)天氣地圖
4 - 游戲開發(fā)
是的，這是正確的，你可以使用HTML5的<canvas>標(biāo)簽開發(fā)游戲。HTML5為開發(fā)有趣的交互式游戲提供了一種優(yōu)秀的，移動(dòng)友好的方式。如果您以前制作過Flash游戲，那么您一定會(huì)喜歡構(gòu)建HTML5游戲。
Script-Tutorials最近提供了一個(gè)關(guān)于HTML5游戲開發(fā)的四個(gè)系列的課程，并且檢查一下他們創(chuàng)建的一些病態(tài)的東西：
HTML5游戲開發(fā)第一課
HTML5游戲開發(fā)第二課
HTML5游戲開發(fā)第三課
HTML5游戲開發(fā)第四課
還有一些值得檢查的資源：
如何使用Impact HTML5游戲引擎構(gòu)建小行星
使用Node.js開發(fā)多人游戲HTML5游戲
如何用HTML5 SVG和Canvas編寫B(tài)rikBloc游戲
如何制作一個(gè)簡(jiǎn)單的HTML5 Canvas游戲
Html5游戲
LimeJS，一個(gè)HTML5游戲框架
3 - 傳統(tǒng)/跨瀏覽器支持
你現(xiàn)代流行的瀏覽器都支持HTML5（Chrome瀏覽器，F(xiàn)irefox，Safari IE9和Opera），并且HTML5文檔類型已經(jīng)創(chuàng)建，所以所有的瀏覽器，甚至是真正老的和惹人討厭的IE6都可以使用它。但是，只是因?yàn)榕f的瀏覽器識(shí)別的文檔類型，并不意味著他們可以使用所有新的HTML5標(biāo)簽和好東西。幸運(yùn)的是，HTML5的構(gòu)建使事情變得更簡(jiǎn)單，并且更加跨瀏覽器友好，所以在那些不喜歡新標(biāo)簽的舊IE瀏覽器中，我們只需簡(jiǎn)單地添加一個(gè)Javascript shiv，就可以使用新的元素：
<！ - [if lt IE 9]> <script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js”> </ script><！[ENDIF] - >
一些資源值得檢查：
HTML5和CSS3 READINESS
我什么時(shí)候可以使用
HTML5跨瀏覽器填充
Modernizr的
手機(jī)
稱它為預(yù)感，但我認(rèn)為移動(dòng)技術(shù)正變得越來越受歡迎。我知道，這是一個(gè)非常瘋狂的假設(shè)，有些人可能正在考慮 - 手機(jī)只是一種時(shí)尚...對(duì)。移動(dòng)設(shè)備正在接管世界。移動(dòng)設(shè)備的采用量繼續(xù)快速增長(zhǎng)，這意味著越來越多的用戶將使用他們的移動(dòng)瀏覽器來查看您的網(wǎng)站或應(yīng)用程序。HTML5是用于開發(fā)移動(dòng)網(wǎng)站和應(yīng)用程序的移動(dòng)最便捷的工具。隨著Adobe宣布移動(dòng)Flash的死亡，您現(xiàn)在將依靠HTML5來做您的移動(dòng)Web應(yīng)用程序開發(fā)。
移動(dòng)瀏覽器已經(jīng)完全采用了HTML5，所以創(chuàng)建移動(dòng)就緒項(xiàng)目就像為他們的小型觸摸屏顯示器設(shè)計(jì)和構(gòu)建一樣簡(jiǎn)單 - 因此響應(yīng)式設(shè)計(jì)的流行。有一些偉大的元標(biāo)簽，也可以讓你優(yōu)化移動(dòng)：
視口：允許您定義視口寬度和縮放設(shè)置
全屏瀏覽：允許Apple設(shè)備以全屏模式顯示的IOS特定值
主屏幕圖標(biāo)：與桌面上的圖標(biāo)一樣，這些圖標(biāo)用于添加收藏夾到IOS和Android移動(dòng)設(shè)備的主屏幕
有關(guān)如何通過HTML5動(dòng)員您的網(wǎng)站的更多信息，請(qǐng)查看“Mobifying”您的HTML5網(wǎng)站。
一些資源值得檢查：
移動(dòng)HTML5
移動(dòng)鍋爐板
HTML5移動(dòng)Web應(yīng)用程序
這是未來，得到它！
您今天應(yīng)該開始使用HTML5的頭號(hào)原因是：這是未來，現(xiàn)在開始使用它，所以您不會(huì)落后。隨著越來越多的元素被采納，越來越多的公司將開始在HTML5中開發(fā)HTML5。HTML5本質(zhì)上就是HTML，它不是什么可怕的東西，它不是你真正需要弄清楚或重新學(xué)習(xí)的東西 - 如果你現(xiàn)在正在開發(fā)嚴(yán)格的XHTML，那么你現(xiàn)在已經(jīng)開發(fā)了HTML5，為什么不充分利用它的當(dāng)前能力呢？
你真的沒有任何借口不采用HTML5，并開始你的新戀情。實(shí)際上，我更喜歡使用HTML5的唯一真正原因是編寫更干凈的代碼，所有其他的好處和有趣的功能，我甚至沒有真正跳過，但這是偉大的事情，你可以開始使用它現(xiàn)在甚至不改變你設(shè)計(jì)的方式。所以，現(xiàn)在開始使用它，不管你是簡(jiǎn)化和使你的標(biāo)記更加語義，或者你將要建立一個(gè)將接管世界的病態(tài)的新的手機(jī)游戲 - 誰知道，也許你可以開始銷售游戲的動(dòng)物版本字符也。
所周知，16年無疑是直播行業(yè)的春天，同時(shí)也是H5的一次高潮。
so，到現(xiàn)在用H5技術(shù)在移動(dòng)端做網(wǎng)頁直播也是見怪不怪了，但是?。。?/p>
今天我們的主角是webApp下播放視頻
參考文獻(xiàn)：
1)HTML5+CSS3+JQuery打造自定義視頻播放器
簡(jiǎn)介
HTML5的<video>標(biāo)簽已經(jīng)被目前大多數(shù)主流瀏覽器所支持，包括還未正式發(fā)布的IE9也聲明將支持<video>標(biāo)簽，利用瀏覽器原生特性嵌入視頻有很多好處，所以很多開發(fā)者想盡快用上，但是真正使用前還有些問題要考慮，尤其是 Opera/Firefox 和IE/Safari瀏覽器所支持的視頻編碼不同的問題，Google幾個(gè)月前發(fā)布的開源視頻編碼VP8有望能解決這一問題，另外Google還發(fā)布了開放網(wǎng)絡(luò)媒體項(xiàng)目WebM，旨在幫助開發(fā)者為開放網(wǎng)絡(luò)制作出世界級(jí)媒體格式，Opera, Firefox, Chrome和IE9都將支持VP8，而且Flash Player也將可以播放VP8，這就意味著我們很快就可以只制作一個(gè)版本的視頻然后在所有主流瀏覽器上播放了。另外一個(gè)主要的問題就是如何構(gòu)建自定義的HTML5<video>播放器，這是目前Flash Player的優(yōu)勢(shì)所在，利用Flash的IDE所提供的接口可以很方便的構(gòu)建一個(gè)個(gè)性化的視頻播放器，那HTML5的<video>標(biāo)簽要怎樣才能實(shí)現(xiàn)呢？這個(gè)問題就是本文所要解決的！我們將開發(fā)一個(gè)HTML5<video>視頻播放器的jQuery插件，并且可以很方便的進(jìn)行自定義，將分為以下幾個(gè)部分：
1.視頻控制工具條
2.視頻控制按鈕
3.打包成jQuery插件
4.外觀和體驗(yàn)
5.自定義皮膚
視頻控制工具條
做為一個(gè)專業(yè)的web開發(fā)人員，我們創(chuàng)建一個(gè)視頻播放器時(shí)一定希望它的外觀在各個(gè)瀏覽器中看起來一致(consistent)，但是通過下面的圖可以看到目前各個(gè)瀏覽器提供的視頻控制工具條外觀各不相同：
那就沒辦法了，我們得自己從頭來創(chuàng)建這個(gè)控制工具條，利用HTML和CSS再加上一些圖片實(shí)現(xiàn)起來并不算很難，另外通過HTML5多媒體元素提供的API我們可以很方便將創(chuàng)建的任何按鈕與播放/暫停等事件進(jìn)行綁定。
視頻控制按鈕
基本的視頻控制工具條要包含一個(gè)播放/暫停按鈕，一個(gè)進(jìn)度條，一個(gè)計(jì)時(shí)器和一個(gè)音量控制按鈕，我們將這些按鈕放在<video>元素下面，并用一個(gè)div作為父容器：
Java代碼
<div class="ghinda-video-controls">
<a class="ghinda-video-play" title="Play/Pause"></a>
<div class="ghinda-video-seek"></div>
<div class="ghinda-video-timer">00:00</div>
<div class="ghinda-volume-box">
<div class="ghinda-volume-slider"></div>
<a class="ghinda-volume-button" title="Mute/Unmute"></a>
</div>
</div>
復(fù)制代碼
注意，我們使用元素的class屬性來代替ID屬性是為了方便在一個(gè)頁面上使用多個(gè)播放器。
打包成jQuery插件
創(chuàng)建好控制按鈕后我們需要配合多媒體元素的API來實(shí)現(xiàn)視頻控制的目的，正如前面提到的一樣我們將我們的播放器打包成jQuery插件，這樣可以很好的實(shí)現(xiàn)復(fù)用，代碼如下：
Java代碼
$.fn.gVideo=function(options) {
// build main options before element iteration
var defaults={
theme: 'simpledark',
childtheme: ''
};
var options=$.extend(defaults, options);
// iterate and reformat each matched element
return this.each(function() {
var $gVideo=$(this);
//create html structure
//main wrapper
var $video_wrap=$('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
//controls wraper
var $video_controls=$('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');
$gVideo.wrap($video_wrap);
$gVideo.after($video_controls);
這里先假設(shè)您了解jQuery并知道如何創(chuàng)建一個(gè)jQuery插件，因?yàn)檫@個(gè)不在本文的討論范圍之內(nèi)，在上面這段腳本中我們使用jQuery動(dòng)態(tài)創(chuàng)建視頻控制工具條的元素，接下來為了綁定事件我們需要獲取對(duì)應(yīng)的元素：
Java代碼
//get newly created elements
var $video_container=$gVideo.parent('.ghinda-video-player');
var $video_controls=$('.ghinda-video-controls', $video_container);
var $ghinda_play_btn=$('.ghinda-video-play', $video_container);
var $ghinda_video_seek=$('.ghinda-video-seek', $video_container);
var $ghinda_video_timer=$('.ghinda-video-timer', $video_container);
var $ghinda_volume=$('.ghinda-volume-slider', $video_container);
var $ghinda_volume_btn=$('.ghinda-volume-button', $video_container);
$video_controls.hide(); // keep the controls hidden
這里我們通過className方式獲取，先讓工具條隱藏直到所有資源加載完成，現(xiàn)在來實(shí)現(xiàn)播放/暫停按鈕：
Java代碼
var gPlay=function() {
if($gVideo.attr('paused')==false) {
$gVideo[0].pause();
} else {
$gVideo[0].play();
}
};
$ghinda_play_btn.click(gPlay);
$gVideo.click(gPlay);
$gVideo.bind('play', function() {
$ghinda_play_btn.addClass('ghinda-paused-button');
});
$gVideo.bind('pause', function() {
$ghinda_play_btn.removeClass('ghinda-paused-button');
});
$gVideo.bind('ended', function() {
$ghinda_play_btn.removeClass('ghinda-paused-button');
});
大多數(shù)瀏覽器在右鍵點(diǎn)擊視頻時(shí)會(huì)提供一個(gè)獨(dú)立的菜單，它也提供了視頻控制功能，如果用戶通過這個(gè)右鍵菜單控制視頻那就會(huì)跟我們的自定義控件沖突，所以為了避免這一點(diǎn)我們需要綁定視頻播放器自身的“播放”，“暫?！焙汀敖Y(jié)束”事件，在事件處理函數(shù)中處理播放/暫停按鈕，控制按鈕的樣式。
為了創(chuàng)建進(jìn)度條的拖動(dòng)塊，我們使用了jQuery UI的Slider組件：
Java代碼
var createSeek=function() {
if($gVideo.attr('readyState')) {
var video_duration=$gVideo.attr('duration');
$ghinda_video_seek.slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: video_duration,
animate: true,
slide: function(){
seeksliding=true;
},
stop:function(e,ui){
seeksliding=false;
$gVideo.attr("currentTime",ui.value);
}
});
$video_controls.show();
} else {
setTimeout(createSeek, 150);
}
};
createSeek();
正如你所看到的，這里我們寫了一個(gè)遞歸函數(shù)，通過循環(huán)比較video的readyState屬性來判斷視頻是否已經(jīng)準(zhǔn)備好，否則我們就不能獲得視頻的時(shí)長(zhǎng)也無法創(chuàng)建滑動(dòng)塊，當(dāng)視頻準(zhǔn)備好后我們初始化滑動(dòng)塊并顯示控制工具條，下一步我們通過綁定video元素的timeupdate事件實(shí)現(xiàn)計(jì)時(shí)器功能：
Java代碼
var gTimeFormat=function(seconds){
var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
return m+":"+s;
};
var seekUpdate=function() {
var currenttime=$gVideo.attr('currentTime');
if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);
$ghinda_video_timer.text(gTimeFormat(currenttime));
};
$gVideo.bind('timeupdate', seekUpdate);
這里我們用seekUpdate函數(shù)獲取video的currentTime屬性值然后調(diào)用gTimeFormat函數(shù)進(jìn)行格式化后得到當(dāng)前播放的時(shí)間點(diǎn)。
至于音量控制控件我們還是利用jQuery UI的Slider組件然后利用自定義函數(shù)實(shí)現(xiàn)靜音和取消靜音的功能：
Java代碼
$ghinda_volume.slider({
value: 1,
orientation: "vertical",
range: "min",
max: 1,
step: 0.05,
animate: true,
slide:function(e,ui){
$gVideo.attr('muted',false);
video_volume=ui.value;
$gVideo.attr('volume',ui.value);
}
});
var muteVolume=function() {
if($gVideo.attr('muted')==true) {
$gVideo.attr('muted', false);
$ghinda_volume.slider('value', video_volume);
$ghinda_volume_btn.removeClass('ghinda-volume-mute');
} else {
$gVideo.attr('muted', true);
$ghinda_volume.slider('value', '0');
$ghinda_volume_btn.addClass('ghinda-volume-mute');
};
};
$ghinda_volume_btn.click(muteVolume);
最后當(dāng)我們自己的自定義視頻控制工具條構(gòu)造完成后需要移除<video>標(biāo)簽的controls屬性，這樣瀏覽器默認(rèn)的工具條就被去掉了。
好了，我們的插件功能已經(jīng)全部完成了，調(diào)用方法：
Java代碼
$('video').gVideo();
這會(huì)將我們的插件應(yīng)用到頁面上每一個(gè)video元素上。
外觀和體驗(yàn)
好的，現(xiàn)在到了比較有意思的部分，也就是播放器的外觀和體驗(yàn)了。當(dāng)插件功能已經(jīng)完成后利用一點(diǎn)CSS就可以很容易地自定義樣式了，我們將全部使用CSS3來實(shí)現(xiàn)。
首先，我們給播放器主容器加一些樣式：
Java代碼
.ghinda-video-player {
float: left;
padding: 10px;
border: 5px solid #61625d;
-moz-border-radius: 5px; /* FF1+ */
-ms-border-radius: 5px; /* IE future proofing */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
background: #000000;
background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */
box-shadow: inset 0 15px 35px #535353;
}
下一步，我們?cè)O(shè)置視頻控制工具條左邊浮動(dòng)使它們水平對(duì)齊，利用CSS3的opacity和transitions我們給播放/暫停和靜音/取消靜音按鈕添加了非常不錯(cuò)的懸浮效果：
Java代碼
.ghinda-video-play {
display: block;
width: 22px;
height: 22px;
margin-right: 15px;
background: url(../images/play-icon.png) no-repeat;
opacity: 0.7;
-moz-transition: all 0.2s ease-in-out; /* Firefox */
-ms-transition: all 0.2s ease-in-out; /* IE future proofing */
-o-transition: all 0.2s ease-in-out; /* Opera */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
transition: all 0.2s ease-in-out;
}
.ghinda-paused-button {
background: url(../images/pause-icon.png) no-repeat;
}
.ghinda-video-play:hover {
opacity: 1;
}
如果您仔細(xì)看了前面那段根據(jù)視頻播放狀態(tài)(Playing/Paused)添加和移除播放/暫停按鈕樣式的JavaScript代碼，就會(huì)明白為什么.ghinda-paused-button為什么要重寫.ghinda-video-play的背景屬性了。
現(xiàn)在輪到滑動(dòng)塊了，我們進(jìn)度條和音量控制的滑動(dòng)塊的實(shí)現(xiàn)都是利用了jQuery UI的Slider組件，這個(gè)組件它本身自帶了樣式，定義在jQuery UI對(duì)應(yīng)的css文件中，但是為了使滑動(dòng)塊和播放器其他控件外觀保持一致我們?nèi)恐貙懥怂臉邮剑?/p>
Java代碼
.ghinda-video-seek .ui-slider-handle {
width: 15px;
height: 15px;
border: 1px solid #333;
top: -4px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background: #e6e6e6;
background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
box-shadow: inset 0 -3px 3px #d5d5d5;
}
.ghinda-video-seek .ui-slider-handle.ui-state-hover {
background: #fff;
}
.ghinda-video-seek .ui-slider-range {
-moz-border-radius:15px;
-ms-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background: #4cbae8;
background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
box-shadow: inset 0 -3px 3px #39a2ce;
}
這時(shí)候音量控制的滑動(dòng)塊一直顯示在音量按鈕旁邊，我們需要將它改成默認(rèn)隱藏，當(dāng)鼠標(biāo)懸浮在音量按鈕上再動(dòng)態(tài)顯示出來，使用transitions來實(shí)現(xiàn)這個(gè)效果會(huì)是個(gè)不錯(cuò)的的選擇：
Java代碼
.ghinda-volume-box {
height: 30px;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-ms-transition: all 0.1s ease-in-out; /* IE future proofing */
-o-transition: all 0.2s ease-in-out; /* Opera */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
transition: all 0.1s ease-in-out;
}
.ghinda-volume-box:hover {
height: 135px;
padding-top: 5px;
}
.ghinda-volume-slider {
visibility: hidden;
opacity: 0;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-ms-transition: all 0.1s ease-in-out; /* IE future proofing */
-o-transition: all 0.1s ease-in-out; /* Opera */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
transition: all 0.1s ease-in-out;
}
.ghinda-volume-box:hover .ghinda-volume-slider {
position: relative;
visibility: visible;
opacity: 1;
}
利用一些基礎(chǔ)的CSS屬性以及CSS3提供的新屬性我們打造了一個(gè)全新的播放器外觀，它看起來是這個(gè)樣子：
自定義皮膚
可能您已經(jīng)注意到，我們?cè)诰帉懖寮臅r(shí)候已經(jīng)定義了一些默認(rèn)選項(xiàng)，它們是theme和childtheme，可以在調(diào)用插件的時(shí)候根據(jù)需要方便的應(yīng)用自定義皮膚。
這里解釋下theme就是所有控件的一整套樣式定義，childtheme就是在theme基礎(chǔ)上重寫某些樣式，我們?cè)谡{(diào)用插件的時(shí)候可以同時(shí)指定這兩個(gè)選項(xiàng)或者其中的一個(gè)：
Java代碼
$('video').gVideo({
childtheme:'smalldark'
});
我們寫了一個(gè)示例的皮膚smalldark，它只重寫了部分的樣式，顯示效果是這樣的：
總結(jié)
利用HTML5 video，JavaScript和CSS3打造自定義的視頻播放器真的非常容易，t實(shí)現(xiàn)工具條功能用JavaScrip，外觀和體驗(yàn)交給CSS3，我們得到了一個(gè)功能強(qiáng)大并且易于定制的解決方案！
enjoy！
2)mui Html5 Video 實(shí)現(xiàn)方案
前言: 最近項(xiàng)目中需要用到html5 視頻播放功能,于是稍微研究了解了下,遇到了很多坑,特此記錄下.
一、 Html5 Video
參考來源: http://www.xuanfengge.com/html5-video-play.html
(這篇博文確實(shí)幫助很大)
1.1、 目的
將Html5 Video功能應(yīng)用到實(shí)際項(xiàng)目中,針對(duì)不同的平臺(tái)和環(huán)境,進(jìn)行個(gè)性化處理。
基本只考慮webkit瀏覽器兼容問題
1.2、 Html5 Video支持格式
只支持: .mp4后綴(.h264編碼格式),和.webm后綴(專用web視頻格式),以及.ogg后綴(音頻文件)
注意: Html5 Video 可以添加多個(gè)source源來進(jìn)行兼容適配,這樣,當(dāng)?shù)谝粋€(gè)源讀取出問題時(shí)會(huì)自動(dòng)讀取下一個(gè)源. 比如可以同時(shí)在前面加上.webm和.mp4源,這樣一個(gè)出錯(cuò)時(shí)會(huì)自動(dòng)讀取另一個(gè)可用源(因?yàn)椴煌瑸g覽器,支持的格式是不一樣的)
但是,Hybird模式的 Android 下,有些機(jī)型只能讀取第一個(gè)source來源(測(cè)試華為和聯(lián)想都是),所以也就是說在這種情況下,要確保第一個(gè)source源是正確的
各大瀏覽器兼容如圖所示:
見圖1
1.3、 不同平臺(tái)環(huán)境和對(duì)應(yīng)實(shí)現(xiàn)方案
說明: 這里分為兩大塊,普通瀏覽器環(huán)境(pc和手機(jī),主要是移動(dòng)端,pc不做特別處理)和Hybird模式的APP環(huán)境(Android和iOS).
注: Html5 video可以播放本地視頻或者網(wǎng)絡(luò)視頻
1.3.1、 普通瀏覽器環(huán)境
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統(tǒng)一處理方法處理后,點(diǎn)擊圖片手動(dòng)隱藏圖片,設(shè)置視頻大小,手動(dòng)播放視頻.
注: 播放效果則由各大瀏覽器自行實(shí)現(xiàn)
手機(jī)端瀏覽器實(shí)現(xiàn)的不同效果,比如:
QQ瀏覽器(包括QQ客戶端內(nèi)置的瀏覽器):播放時(shí)會(huì)自動(dòng)進(jìn)入全屏
華為自帶瀏覽器: 正常小窗口播放
1.3.2、 Hybird App環(huán)境
說明: 內(nèi)聯(lián)播放是指直接在video標(biāo)簽中播放視頻,沒有必要進(jìn)入全屏
1.3.2.1、 Android內(nèi)聯(lián)播放
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統(tǒng)一處理方法處理后,點(diǎn)擊圖片手動(dòng)隱藏圖片,設(shè)置視頻大小,手動(dòng)播放視頻.
*Android內(nèi)聯(lián)播放需要注意,必須開啟硬件加速,由于有些Android手機(jī) webview是默認(rèn)關(guān)閉硬件加速的,所以必須在創(chuàng)建這個(gè)帶視頻播放的webview時(shí)手動(dòng)添加 硬件加速屬性才行.(詳情見plus創(chuàng)建webview的style)
style.hardwareAccelerated=true;
1.3.2.2、 iOS內(nèi)聯(lián)播放
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統(tǒng)一處理方法處理后,點(diǎn)擊圖片手動(dòng)隱藏圖片,設(shè)置視頻大小,手動(dòng)播放視頻.
*內(nèi)聯(lián)播放注意要點(diǎn),由于iOS下默認(rèn)是全屏播放的,所以需要經(jīng)過設(shè)置才能正常內(nèi)聯(lián)播放
第一步:在項(xiàng)目的manifest里面配置允許webview內(nèi)聯(lián)播放
"plus": {
"splashscreen": {
"autoclose": true,/*是否自動(dòng)關(guān)閉程序啟動(dòng)界面，true表示應(yīng)用加載應(yīng)用入口頁面后自動(dòng)關(guān)閉；false則需調(diào)plus.navigator.closeSplashscreen()關(guān)閉*/
"waiting": true/*是否在程序啟動(dòng)界面顯示等待雪花，true表示顯示，false表示不顯示。*/
},
"allowsInlineMediaPlayback": true,/*設(shè)置ios下允許內(nèi)聯(lián)播放*/
"popGesture": "close"第二步: 創(chuàng)建video標(biāo)簽時(shí),手動(dòng)加上內(nèi)聯(lián)播放的屬性(iOS不支持preload)
<!-- 讓ios支持內(nèi)聯(lián)播放,必須添加 webkit-playsinline 標(biāo)簽 --> <video webkit-playsinline id="videoMedia" controls="controls" preload>
這樣iOS手機(jī)在播放的時(shí)候才會(huì)采用內(nèi)聯(lián)播放
1.3.2.3、 Android非內(nèi)聯(lián)播放
*通過NJS使用原生播放器來播放視頻,傳入的url可以是本地的或網(wǎng)絡(luò)的地址
*用 Video 視頻統(tǒng)一處理方法處理后,點(diǎn)擊圖片之后,圖片保持不變(所以沒有必要隱藏圖片),直接獲取視頻的資源地址,傳給原生播放器播放
注: 這種模式下,性能要比直接html5自帶播放器播放高
1.3.2.4、 iOS非內(nèi)聯(lián)播放
*用Html5 Video 自帶的播放欄控件(非內(nèi)聯(lián)播放需要去除特定內(nèi)聯(lián)屬性”webkit-playsinline”,這樣才能全屏播放)
if(!isInlinePlay){
//如果是非內(nèi)斂,ios需要去除內(nèi)聯(lián)樣式
mediaTarget.removeAttribute('webkit-playsinline');
}*用 Video 視頻統(tǒng)一處理方法處理后,點(diǎn)擊圖片之后,圖片保持不變(所以沒有必要隱藏圖片),直接調(diào)用video.play()播放視頻(這時(shí)候會(huì)用一個(gè)全屏播放器來播放視頻)
1.3.3、 注意要點(diǎn)
如果采用NJS通過Android原生播放器播放視頻,目前無法監(jiān)聽到視頻的一些自定義事件.(如下載中,播放完畢,暫停,播放時(shí)間等)
而如果采用Html5 Video自帶播放,這些是可以通過腳本控制的.
所以選定方案時(shí)需要進(jìn)行衡量
*另外,在Html5 Video播放時(shí),無法監(jiān)聽到規(guī)定的結(jié)束事件seeked,只能在timeUpdate里面判斷,如果ended為true就代表結(jié)束了.
*在NJS通過Android原生播放器播放時(shí),可以通過document監(jiān)聽resume和pause事件判斷是否進(jìn)入播放和退出播放
1.4、 Tips
1.4.1、 關(guān)于Video 視頻統(tǒng)一處理的方案
說明: 由于將一個(gè)<Video>直接顯示在頁面中,會(huì)有各種五花八門的播放器效果,如圖:
(這里引用了參考來源的圖)
見圖2
顯然,體驗(yàn)效果并不好,所以現(xiàn)在的做法是用一張模擬播放的圖片來替代<Video>所在的地方,而將Video元素設(shè)置為1*1像素大小.然后給圖片設(shè)置點(diǎn)擊監(jiān)聽,監(jiān)聽到點(diǎn)擊時(shí),播放視頻.
注意:
*這里不要用{display: none}或者{width:0;height:0;}的方式，因?yàn)檫@樣視頻元素會(huì)處于未激活的狀態(tài)，給后續(xù)的處理帶來麻煩.
*這里沒有考慮ios<6和一些低版本的Android的兼容性問題了(這些版本里,無法直接通過video.play()來播放),因?yàn)轫?xiàng)目環(huán)境基本上要求Android>4.0 iOS 7.0以上的.
*關(guān)于點(diǎn)擊圖片播放視頻后,如果是內(nèi)聯(lián)播放模式下(或者是普通瀏覽器),就應(yīng)該將圖片隱藏,然后將視頻大小設(shè)置為本來的大小(一般為圖片大小)；如果是非內(nèi)聯(lián)播放模式(全屏模式),就沒有必要隱藏圖片了,因?yàn)閕OS下會(huì)自動(dòng)打開一個(gè)全屏播放器來播放視頻,Android下考慮到Html5 video較卡,所以也會(huì)通過NJS使用原生播放器來全屏播放視頻.
1.4.2、 Android NJS播放視屏的實(shí)現(xiàn)代碼
說明: 這個(gè)是Dcloud論壇中有人分享的
//非內(nèi)聯(lián)模式下的plus下的android才用到
var Intent=plus.android.importClass("android.content.Intent");
var Uri=plus.android.importClass("android.net.Uri");
var main=plus.android.runtimeMainActivity();
var intent=new Intent(Intent.ACTION_VIEW);
var uri=Uri.parse(url);
intent.setDataAndType(uri, "video/*");
main.startActivity(intent);1.4.3、 如何讀取元素的寬高
*在獲取視頻的寬度時(shí),發(fā)現(xiàn)用 video.style.width無法獲取到寬度.
后來查了資料,發(fā)現(xiàn)dom.style.width(height)只能獲取在stye直接賦予的值.而如果是通過css樣式表賦予的值是無法直接獲取的,只能通過dom.offsetWidth(offsetHeight)獲取.
*設(shè)置元素寬和高是不要直接在style里設(shè)置,而是最好通過css樣式表賦予
*讀取元素寬和高時(shí),用offsetWidth(offsetHeight)
1.4.4、 關(guān)于全屏播放的問題
在PC端webkit瀏覽器下,全屏代碼如下:
進(jìn)入全屏: videoContainer(對(duì)應(yīng)的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*但是經(jīng)測(cè)試,在手機(jī)瀏覽器和Hybird模式下的手機(jī)環(huán)境中都無法使用,
應(yīng)該是手機(jī)瀏覽器中video 播放器的全屏模式和pc端的有區(qū)別,已經(jīng)脫離了webkit的全屏組件,而是用原生自己實(shí)現(xiàn)的.
1.5、 遇到問題及解決方法
1.5.1、 Video.currentTime 設(shè)置值時(shí)設(shè)置無效,或者變?yōu)?
原因分析:
與測(cè)試的服務(wù)器和端口有關(guān),測(cè)試環(huán)境是放在hbuild本地瀏覽器的,沒有處理好視頻快進(jìn)問題,所以會(huì)導(dǎo)致每次快進(jìn)后,視頻都會(huì)重置-在某些測(cè)試服務(wù)器上,則出現(xiàn)快進(jìn)無效,但不會(huì)重置
解決方法:
將網(wǎng)頁用其它正式服務(wù)器打開均可正常,如tomcat,wampserver,甚至直接在本地打開也行.
1.5.2、 無法通過代碼Video.src獲取資源路徑
原因分析:
本實(shí)例中,Video是通過source添加src的,無法直接讀取video的src
解決方法:
可以通過讀取到第一個(gè)source的標(biāo)簽,再獲取source的src
注:本來這個(gè)方法有一個(gè)缺點(diǎn)就是有可能第一個(gè)source的src不可用.但是由于Android中第一個(gè)source必須有用才行.否則無法正常播放.所以在確保第一個(gè)source正確的情況下能這樣用.
1.5.3、 部分Android機(jī)型無法退出全屏
描述:
在使用Html5 Video自帶播放器播放時(shí),部分Android機(jī)型(如聯(lián)想K860點(diǎn)擊全屏按鈕進(jìn)入全屏后,無法退出全屏-因?yàn)檫M(jìn)入全屏后,全屏按鈕不見了)
原因分析: 可能是手機(jī)廠商擅自劫持了瀏覽器或者篡改了瀏覽器實(shí)現(xiàn)方式
解決方法:
目前無法解決,在這類機(jī)型中,建議直接采用非內(nèi)聯(lián)模式播放或者是盡量不要手動(dòng)進(jìn)入全屏
3)移動(dòng)端HTML5<video>視頻播放優(yōu)化實(shí)踐
遇到的挑戰(zhàn)
移動(dòng)端HTML5使用原生<video>標(biāo)簽播放視頻，要做到兩個(gè)基本原則，速度快和體驗(yàn)佳，先來分析一下這兩個(gè)問題。
下載速度
以一個(gè)8s短視頻為例，wifi環(huán)境下提供的高清視頻達(dá)到1000kbps，文件大小大約1MB；非wifi環(huán)境下提供的低碼率視頻是500kbps左右，文件大小大約500KB；參考QzoneTouch多普勒測(cè)速，2g網(wǎng)絡(luò)的平均速度是14KB/s，那么下載一個(gè)低碼率視頻耗時(shí)35s；那么要想流暢播放視頻，就需要一個(gè)加載等待的過程，這個(gè)過程要有明確的反饋，不能讓用戶有“壞掉了”的感覺。
多普勒測(cè)速數(shù)據(jù)參考
| # | dns(s) | conn(s) | rtt(s) | tran(kb/s) |
|---|---|---|---|---|
| 2g | 3.85785 | 2.33482 | 2.57478 | 14.0374 |
| 3g | 1.60643 | 0.743109 | 0.608047 | 60.1967 |
| wifi | 0.986921 | 0.550208 | 0.444332 | 70.8728 |
用戶體驗(yàn)
視頻是否可以自動(dòng)播放，是否能循環(huán)播放，是否能顯示下載進(jìn)度，播放的時(shí)候如何隱藏控制條，暫停的時(shí)候又能顯示出來呢。這些問題看上去貌似簡(jiǎn)單，但是由于PC/iOS/Android這些不同平臺(tái)、不同的瀏覽器內(nèi)核、甚至相同內(nèi)核的不同版本，所實(shí)現(xiàn)的<video>屬性、方法和事件差異較大，解決兼容性問題又給開發(fā)造成了很大困擾。
分析原因
事件差異
下面是播放一個(gè)短視頻，在不同平臺(tái)觸發(fā)事件和獲取屬性的差異表現(xiàn)。
PC
| # | event | readyState | currentTime (s) | buffered (s) | duration (s) | 視頻狀態(tài) |
|---|---|---|---|---|---|---|
| 1 | loadstart | NOTHING | 0 | – | – | – |
| 2 | suspend | NOTHING | 0 | – | – | – |
| 3 | play | NOTHING | 0 | – | – | – |
| 4 | waiting | NOTHING | 0 | – | – | – |
| 5 | durationchange | METADATA | 0 | 5.35 | 7.91 | 獲取到視頻長(zhǎng)度 |
| 6 | loadedmetadata | METADATA | 0 | 0.66 | 7.91 | 獲取到元數(shù)據(jù) |
| 7 | loadeddata | ENOUGHDATA | 0 | 0.66 | 7.91 | – |
| 8 | canplay | ENOUGH_DATA | 0 | 0.66 | 7.91 | – |
| 9 | playing | ENOUGH_DATA | 0 | 0.66 | 7.91 | 開始播放 |
| 10 | canplaythrough | ENOUGH_DATA | 0 | 0.66 | 7.91 | 可以流暢播放 |
| 11 | progress | ENOUGH_DATA | 0.11 | 3.68 | 7.91 | 持續(xù)下載 |
| 12 | timeupdate | ENOUGH_DATA | 0.14 | 4.44 | 7.91 | 播放進(jìn)度變化 |
| … | … | … | … | … | … | … |
| 23 | progress | ENOUGH_DATA | 1.77 | 7.91 | 7.91 | 下載完畢 |
| 24 | suspend | ENOUGH_DATA | 1.77 | 7.91 | 7.91 | – |
| 25 | timeupdate | ENOUGH_DATA | 1.9 | 7.91 | 7.91 | 繼續(xù)播放中 |
| … | … | … | … | … | … | … |
| 48 | timeupdate | ENOUGH_DATA | 7.7 | 7.91 | 7.91 | – |
| 49 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 50 | seeking | METADATA | 0 | 7.91 | 7.91 | – |
| 51 | waiting | METADATA | 0 | 7.91 | 7.91 | – |
| 52 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 53 | seeked | ENOUGH_DATA | 0 | 7.91 | 7.91 | 播放完畢進(jìn)度回到起點(diǎn) |
| 54 | canplay | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 55 | playing | ENOUGH_DATA | 0 | 7.91 | 7.91 | 循環(huán)播放 |
| 56 | canplaythrough | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 57 | timeupdate | ENOUGH_DATA | 0.19 | 7.91 | 7.91 | – |
| … | … | … | … | … | … | … |
iOS
| # | event | readyState | currentTime (s) | buffered (s) | duration (s) | 視頻狀態(tài) |
|---|---|---|---|---|---|---|
| 1 | loadstart | NOTHING | 0 | – | – | – |
| 2 | play | NOTHING | 0 | – | – | – |
| 3 | waiting | NOTHING | 0 | – | – | – |
| 4 | durationchange | METADATA | 0 | – | 7.91 | 獲取到視頻長(zhǎng)度 |
| 5 | loadedmetadata | METADATA | 0 | – | 7.91 | 獲取到元數(shù)據(jù) |
| 6 | loadeddata | ENOUGHDATA | 0 | – | 7.91 | – |
| 7 | canplay | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 8 | canplaythrough | ENOUGH_DATA | 0 | 7.91 | 7.91 | 可以流暢播放 |
| 9 | playing | ENOUGH_DATA | 0 | 7.91 | 7.91 | 開始播放 |
| 10 | progress | ENOUGH_DATA | 0 | 7.91 | 7.91 | 下載完畢 |
| 11 | suspend | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 12 | timeupdate | ENOUGH_DATA | 0.02 | 7.91 | 7.91 | 播放進(jìn)度變化 |
| … | … | … | … | … | … | … |
| 43 | timeupdate | ENOUGH_DATA | 7.8 | 7.91 | 7.91 | – |
| 44 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 45 | seeked | ENOUGH_DATA | 0 | 7.91 | 7.91 | 播放完畢進(jìn)度回到起點(diǎn) |
| 46 | timeupdate | ENOUGH_DATA | 0.22 | 7.91 | 7.91 | 循環(huán)播放 |
| … | … | … | … | … | … | … |
Android
| # | event | readyState | currentTime (s) | buffered (s) | duration (s) | 視頻狀態(tài) |
|---|---|---|---|---|---|---|
| 1 | loadstart | NOTHING | 0 | – | – | – |
| 2 | play | NOTHING | 0 | – | – | – |
| 3 | waiting | NOTHING | 0 | 0 | – | – |
| 4 | durationchange | ENOUGH_DATA | 0 | 0 | 0 | – |
| 5 | durationchange | ENOUGH_DATA | 0 | 0 | 7.91 | 獲取到視頻長(zhǎng)度 |
| 6 | loadedmetadata | ENOUGH_DATA | 0 | 0 | 7.91 | 獲取到元數(shù)據(jù) |
| 7 | loadeddata | ENOUGHDATA | 0 | 0 | 7.91 | – |
| 8 | canplay | ENOUGH_DATA | 0 | 0 | 7.91 | – |
| 9 | canplaythrough | ENOUGH_DATA | 0 | 0 | 7.91 | – |
| 10 | playing | ENOUGH_DATA | 0 | 0 | 7.91 | – |
| 11 | timeupdate | ENOUGH_DATA | 0 | 0 | 7.91 | – |
| 12 | progress | ENOUGH_DATA | 0 | 3.57 | 7.91 | 下載中 |
| 13 | timeupdate | ENOUGH_DATA | 0.2 | 6.89 | 7.91 | 開始播放 |
| 14 | progress | ENOUGH_DATA | 0 | 7.91 | 7.91 | 下載完畢 |
| … | … | … | … | … | … | … |
| 49 | timeupdate | ENOUGH_DATA | 7.79 | 7.91 | 7.91 | – |
| 50 | progress | ENOUGH_DATA | 7.87 | 7.91 | 7.91 | – |
| 51 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 52 | seeking | ENOUGH_DATA | 0 | 7.91 | 7.91 | 播放完畢進(jìn)度回到起點(diǎn) |
| 53 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 54 | seeked | ENOUGH_DATA | 0 | 7.91 | 7.91 | 循環(huán)播放失敗卡住了 |
| 55 | progress | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
| 56 | stalled | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
一些常用且需要重點(diǎn)關(guān)注的<video>事件
| event | iOS | Android |
|---|---|---|
| ****************** | *********************************************** | *********************************************** |
| play | 只是要播放視頻，響應(yīng)的是video.play()方法，并不代表已經(jīng)開始播放 | 和iOS一樣，僅是響應(yīng)video.play()方法 |
| durationchange | 會(huì)執(zhí)行一次，一定會(huì)獲取到視頻的duration | 可能會(huì)執(zhí)行多次，只有最后一次才能獲取到真實(shí)的duration，前面的duration都是0；但低版本Android可能獲取到的duration是0或1；（本文提到的低版本Android大部分是4.1以下） |
| canplay | 可以認(rèn)為是視頻元素沒有問題，可以運(yùn)行，沒有更多含義了，基本用不上 | 同iOS |
| canplaythrough | 會(huì)有明確的緩沖，表示可以流暢播放了； | 沒有什么用，視頻仍然會(huì)卡住，數(shù)據(jù)可能還沒有開始加載； |
| playing | 明確表示播放開始了； | 依然沒有用，視頻可能并沒有開始播放； |
| progress | 有明確的下載，可以獲取到當(dāng)前的buffer，并且全部下載完畢后不在觸發(fā)； | 不一定有明確的數(shù)據(jù)下載，并且全部下載完畢后依然繼續(xù)觸發(fā)； |
| timeupdate | 會(huì)有明確的進(jìn)度變化，可以獲取到currentTime； | 進(jìn)度不一定變化，currentTime可能總是0，但是第一次有currentTime變化的timeupdate事件一定代表了視頻開始播放了； |
| error | iOS中會(huì)有明確的錯(cuò)誤拋出； | Android中某些瀏覽器會(huì)莫名其妙的拋出error； |
| stalled | 網(wǎng)絡(luò)狀況不佳，導(dǎo)致視頻下載中斷； | 在沒有play之前，也可能會(huì)拋出該事件。 |
屬性差異
| attributes | iOS | android |
|---|---|---|
| ****************** | *********************************************** | *********************************************** |
| poster 封面圖片 | 支持，但是加載速度明顯比在<img>中要慢； | 不一定支持（瀏覽器廠商的實(shí)現(xiàn)標(biāo)準(zhǔn)不統(tǒng)一）； |
| preload 預(yù)加載 | iPhone不支持； | 可能支持； |
| autoplay 自動(dòng)播放 | iPhone Safari中不支持，但在webview中可能被開啟；iOS開發(fā)文檔明確說明蜂窩網(wǎng)絡(luò)下不允許autoplay； | 可能支持； |
| loop 循環(huán)播放 | 支持 | 可能支持； |
| controls 控制條 | 支持，但是需要開始播放了才顯示 | 基本都支持顯示或者不顯示 |
| width和height | 一定給出明確的屬性設(shè)置，切不能為0； | 如果不設(shè)置，僅僅通過CSS樣式去控制視頻大小，可能會(huì)導(dǎo)致標(biāo)簽失效。 |
其他怪異bug和不友好表現(xiàn)
| iOS | android |
|---|---|
| ********************************************************* | ********************************************************* |
| 物理位置覆蓋在<video>區(qū)域上的元素，click和touch等事件會(huì)失效，比如一個(gè)<a>鏈接如果覆蓋在<video>上，那么點(diǎn)擊后沒有任何效果。 | – |
| iOS8.0+中，單頁面播放視頻超過16個(gè)，再播放的視頻全部MediaError解碼異常無法播放。 | – |
iPhone的Safari會(huì)彈出一個(gè)全屏的播放器來播放視頻，iPad則支持內(nèi)聯(lián)播放。iOS7+ 如果webview（比如微信）開啟了webview.allowsInlineMediaPlayback=YES;，可以通過設(shè)置webkit-playsinline屬性支持內(nèi)聯(lián)播放； | 支持內(nèi)聯(lián)播放，但某些廠商會(huì)用自己的播放器劫持原生的視頻播放； |
| 下載視頻時(shí)，會(huì)先發(fā)送一個(gè)2字節(jié)的請(qǐng)求來獲取視頻元數(shù)據(jù)（比如時(shí)長(zhǎng)），然后再不斷的發(fā)送分包續(xù)傳（206）請(qǐng)求來下載視頻，抓包顯示請(qǐng)求數(shù)和請(qǐng)求量至少有一倍的冗余（x2），這個(gè)嚴(yán)重的bug在iOS8中有明顯的修復(fù)，但是分包的206請(qǐng)求仍然會(huì)有冗余數(shù)據(jù)的下載，浪費(fèi)了流量。 | 比iOS的處理方式好，沒有第一個(gè)2字節(jié)請(qǐng)求，沒有流量損耗； |
| – | 低版本Android（<=4.0.4）中，<video>如果在有相對(duì)和決定定位的層中，可能會(huì)導(dǎo)致整個(gè)頁面錯(cuò)位。 |
| – | 某些瀏覽器廠商會(huì)劫持<video>，用其“自己”的播放器來播放視頻，“破壞”了產(chǎn)品本身的播放體驗(yàn)，那么只能case by case的解決了。 |
| 加載視頻時(shí)沒有進(jìn)度提示，視覺上看不出是播放完了還是卡住了； | 加載視頻時(shí)，大都會(huì)顯示一個(gè)自帶的loading UI（菊花）。 |
最佳實(shí)踐
視頻初始化
如果將一個(gè)<video>直接顯示在頁面中，那么就會(huì)看到各種五花八門的播放器初始效果；
這顯然不是一個(gè)好的視覺體驗(yàn)，那么通常的做法是制作一個(gè)模擬的視頻播放視圖，比如一個(gè)封面加一個(gè)播放按鈕。
而真實(shí)的<video>視頻元素要隱藏起來，如何隱藏呢？最好不要用{display: none}或者{width:0;height:0;}的方式，因?yàn)檫@樣視頻元素會(huì)處于未激活的狀態(tài)，給后續(xù)的處理帶來麻煩。最佳的方式是將視頻設(shè)置成1×1像素大小，放在視覺邊緣的位置。
1 2 3 4 5 | <!--iOS--> <video webkit-playsinline width="1"height="1"class="vplayinside notaplink"x-webkit-airplay controls loop="loop"src="<%=src%>"></video> <!--Android--> <video width="1"height="1"controls loop="loop"src="<%=src%>"></video> |
自動(dòng)播放
autoplay的支持依賴內(nèi)核和網(wǎng)絡(luò)狀況，比如iPhone在蜂窩網(wǎng)絡(luò)下明確禁用了autoplay；
經(jīng)過試驗(yàn)，在沒有明確的用戶操作的情況下，直接通過video.play()也是無法激活播放的；
并且在產(chǎn)品設(shè)計(jì)上，自動(dòng)播放也不是一個(gè)舒服的用戶體驗(yàn)，所以產(chǎn)品設(shè)計(jì)上盡量避免使用自動(dòng)播放。
點(diǎn)擊播放
之前提到，視頻最好通過1px大小隱藏起來，那么這時(shí)如何觸發(fā)播放呢？
經(jīng)過試驗(yàn)，當(dāng)在明確的用戶操作（touch、click）時(shí)，通過這些用戶行為事件的回調(diào)函數(shù)，用video.play()是可以觸發(fā)視頻播放的，那么能否在用戶操作后，再去同步的創(chuàng)建和播放視頻呢？答案是肯定的，這無疑是一個(gè)視頻元素初始化的最佳實(shí)踐，但是有些差異需要注意。
iOS6+
可以在用戶的touch時(shí)間中動(dòng)態(tài)創(chuàng)建并播放視頻。
iOS < 6
可以在用戶的touch時(shí)間中動(dòng)態(tài)創(chuàng)建視頻，但不能播放；要再追加一個(gè)click事件來啟動(dòng)播放；也就是說，給偽造的視頻播放按鈕同時(shí)綁定tap和click事件，在tap的時(shí)候創(chuàng)建，在之后300毫秒的click中去播放。
Android
大部分高版本Android可以像iOS6+那樣去處理，但是低版本的不行，必須要通過click事件去傳遞video.play()，為了保持兼容，最好是用幫tap和click兩個(gè)事件來分別完成視頻的初始化和播放。
我們還發(fā)現(xiàn)，有些低版本Android中，無法通過video.play()來播放視頻，必須有真實(shí)的用戶點(diǎn)擊視頻元素才能播放；這種情況，有一個(gè)技巧就是在tap的時(shí)候初始化并放大視頻覆蓋在播放視圖中，讓300毫秒后的真實(shí)點(diǎn)擊行為穿透點(diǎn)擊在視頻元素上來實(shí)現(xiàn)播放。
循環(huán)播放
如果視頻需要循環(huán)播放，那么就增加loop屬性，是否能循環(huán)播放就看瀏覽器是否支持了，因?yàn)檫€沒有找到hack技巧來強(qiáng)制循環(huán)播放；
即使，在不支持循環(huán)播放的Android中，通過監(jiān)聽seeked事件知道了播放進(jìn)度到了終點(diǎn)或起點(diǎn)暫停了，此時(shí)也無法通過video.play()來讓視頻重新播放。
監(jiān)控下載進(jìn)度
如何獲取視頻時(shí)長(zhǎng)和已經(jīng)下載的時(shí)長(zhǎng)？
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 視頻時(shí)長(zhǎng) varduration=video.duration // 獲取視頻已經(jīng)下載的時(shí)長(zhǎng) functiongetEnd(video){ varend=0 try{ end=video.buffered.end(0)||0 end=parseInt(end*1000+1)/1000 }catch(e){ } returnend } |
progress事件表示視頻在加載，但是它的觸發(fā)頻率和時(shí)機(jī)并不規(guī)律，最佳做法是通過一個(gè)定時(shí)器去實(shí)時(shí)獲取end，當(dāng)end >=duration時(shí)，表示已經(jīng)下載完畢，再終止定時(shí)器。
1 2 3 4 5 6 7 8 9 10 | vartimer=setInterval(function(){ varend=getEnd(video), duration=video.duration if(end<duration){ return } clearInterval(timer) },1000) |
全部下載后再播放
假設(shè)播放短視頻，如果網(wǎng)絡(luò)不佳，會(huì)造成播放斷斷續(xù)續(xù)，在iOS中這種停頓還沒有一個(gè)明確的等待提示，這不是一個(gè)好的體驗(yàn)，那么是否可以將視頻全部下載完畢再播放呢？
在iOS中，可以在視頻剛開始下載的時(shí)候馬上暫停，此時(shí)下載還將繼續(xù)，可以做一個(gè)loading的菊花告知視頻正在加載，然后等到視頻全部下載完再開始播放。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(video).one('loadeddata',function(){ // 暫停，但下載還在繼續(xù) video.pause() // 啟動(dòng)定時(shí)器檢測(cè)視頻下載進(jìn)度 vartimer=setInterval(function(){ varend=getEnd(video), duration=video.duration if(end<duration){ return } varwidth=$(video).parent().width() // 下載完了，開始播放吧 $(video).attr{ width:width, height:width } video.play() clearInterval(timer) },1000) }) |
緩沖播放——邊下邊播時(shí)，選擇開始播放的最佳時(shí)間點(diǎn)
當(dāng)視頻越來越長(zhǎng)或者網(wǎng)絡(luò)慢時(shí)，等待視頻全部下載完再播放也不是好的體驗(yàn)，最好能邊下邊播，緩沖到流暢狀態(tài)就開始播放，那什么時(shí)候播放才是最佳時(shí)間點(diǎn)呢？
在iOS中，canplaythrough事件就是這個(gè)最佳時(shí)間點(diǎn)，它是通過動(dòng)態(tài)計(jì)算緩沖量和下載速度得出的視頻可以流暢播放的狀態(tài)反饋。
canplaythrough event: The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
注意：下載完再播放和緩沖播放只適用于iOS。
統(tǒng)計(jì)播放時(shí)間和播放次數(shù)
要統(tǒng)計(jì)實(shí)際的播放時(shí)間，要累加timeupdate事件變化的時(shí)間，再減去中間可能暫停的時(shí)間。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $video.on('playing',function(){ // 開始播放是打點(diǎn) $video.attr('data-updateTime',+newDate()) }) $video.on('pause',function(){ // 暫停播放時(shí)清除打點(diǎn) $video.removeAttr('data-updateTime') }) // 累加播放時(shí)間 $video.on('timeupdate',function(event){ var$video=$(event.target), updateTime=parseInt($video.attr('data-updateTime')||0), playingTime=parseInt($video.attr('data-playingTime')||0), times=parseInt($video.attr('data-times')||0), newtimes=0, video=$video.get(0), duration=parseFloat($video.attr('data-duration')||0), now=+newDate() // 播放時(shí)間 playingTime=playingTime+now-updateTime // 播放次數(shù) newtimes=Math.ceil(playingTime/1000/duration) $video.attr('data-playingTime',playingTime) $video.attr('data-updateTime',now) }) |
異常處理
對(duì)error事件做詳細(xì)的上報(bào)；
對(duì)stalled事件做統(tǒng)計(jì)上報(bào)，并提示用戶網(wǎng)絡(luò)慢等。
參考數(shù)據(jù)
微視觸屏版iOS視頻測(cè)速
| 網(wǎng)絡(luò)環(huán)境 | 視頻碼率 | 獲取到視頻時(shí)長(zhǎng) 時(shí)間點(diǎn)(s) | 開始流暢播放 時(shí)間點(diǎn)(s) | 全部下載完畢 時(shí)間點(diǎn)(s) | 視頻長(zhǎng)度(s) |
|---|---|---|---|---|---|
| wifi | 1000kbps | 2.86 | 3.97 | 5.85 | 8.69 |
| 非wifi | 500kbps | 4.56 | 8 | 10.62 | 8.67 |
搬好凳子看HTML
首先我們?cè)贖B下創(chuàng)建一個(gè)新的app項(xiàng)目，名稱為 欠債
新建一個(gè)video.html
webkit-playsinline : 在ios中，加入此屬性，可以關(guān)閉自動(dòng)全屏播放
object-fit:fill : 視頻充滿video容器的大小
詳細(xì)理由請(qǐng)看參考文獻(xiàn)2or3
在此我們向項(xiàng)目里放置一個(gè)mp4格式的視頻,視頻內(nèi)容不限,可以是小動(dòng)畫,也可以是
ps:要在meta中加上，否則視頻會(huì)擴(kuò)充變形哦
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
OK,現(xiàn)在布局已經(jīng)完成,一個(gè)視頻已經(jīng)在頁面中了
旁白：尼瑪，點(diǎn)了沒反應(yīng)，那這怎么播放？
樓主：你們這群家伙看別的小視頻等個(gè)1小時(shí)都行。。。
旁白：一個(gè)簡(jiǎn)單的播放器，至少要有 暫停/播放，進(jìn)度條，視頻時(shí)長(zhǎng)，全屏等控件吧
樓主：來來來，不要急，先來個(gè)播放按鈕寫在video標(biāo)簽后面
<div class="bad-video"> <video class="" webkit-playsinline style="object-fit:fill;"> <source src='xx.mp4' type="video/mp4"></source> <p>設(shè)備不支持</p> <video> <img src="img/play.png"/> </div>
寫好樣式、
.bad-video { position: relative; overflow: hidden; background-color: #CCCCCC;
}
.bad-video .vplay{ position: absolute; width: 15%; z-index: 99; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}樓主：當(dāng)當(dāng)當(dāng)
再在后面加一個(gè)控制條
<img src="img/play.png" class="vplay" /> <div class="controls"> <div> <div class="progressBar"> <div class="timeBar"></div> </div> </div> <div><span class="current">00:00</span>/<span class="duration">00:00</span></div> <div><span class="fill">全屏</span></div> </div>
.bad-video .controls { width: 100%; height: 2rem; line-height: 2rem; font-size: 0.8rem; color: white; display: block; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, .55); display: -webkit-flex; display: flex;
}.bad-video .controls>* { flex: 1;
}.bad-video .controls>*:nth-child(1) { flex: 6;
}.bad-video .controls>*:nth-child(2) { flex: 2; text-align: center;
}.bad-video .controls .progressBar { margin: .75rem 5%; position: relative; width: 90%; height: .5rem; background-color: rgba(200, 200, 200, .55); border-radius: 10px;
}.bad-video .controls .timeBar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(99, 110, 225, .85); border-radius: 10px;
}總算有個(gè)看起來像樣的了
旁白：樓主，可是還是不能播放啊
樓主：叫你別急，要不你先去擼一把，我寫好了文字@你
旁白：好啊，早說嘛，我先走了，記得@我
樓主：你走，省的我精神分裂碼兩個(gè)人的字
好，現(xiàn)在Html元素已經(jīng)基本上弄好啦，看起來不是那么low了
著微軟“殺手補(bǔ)丁”的出現(xiàn)，除一些特定版外，F(xiàn)lash已經(jīng)成為全球科技圈的歷史名詞，可大家有想過Flash在影音、游戲等應(yīng)用領(lǐng)域留下的市場(chǎng)又被誰拿走呢？種種跡象表明，HTML5在接管Flash“身后”一切之后，有望迎來新的爆發(fā)期。
01
徹底封殺Flash Player的微軟
Adobe 已經(jīng)停止了對(duì) Flash Player 的支持，并開始主動(dòng)阻止內(nèi)容在播放器中運(yùn)行。Adobe 已經(jīng)“強(qiáng)烈建議”所有用戶立即卸載 Flash Player，以保護(hù)他們的設(shè)備和組織免受攻擊。在近期更新的支持文檔中，微軟已經(jīng)確認(rèn) Flash Player 殺手補(bǔ)丁已經(jīng)可以作為“可選更新”供用戶下載。
前幾天悄然更新的支持文檔中，微軟表示：“作為結(jié)束對(duì) Flash Player 支持的掃尾工作，KB4577586 現(xiàn)在作為可選更新從 Windows Update（WU）和 Windows Server Update Services（WSUS）渠道分發(fā)”。
不少人觀察到，F(xiàn)lash Player-killer 更新并不是作為可選補(bǔ)丁提供的，當(dāng)用戶點(diǎn)擊 "檢查更新 "時(shí)，它會(huì)自動(dòng)下載。這說明微軟也在測(cè)試一種 "分階段的方法"，在未來幾個(gè)月內(nèi)，用戶將看到不同配置的更新自動(dòng)下載。
無論是通過Windows Update的 "可選更新 "部分還是自動(dòng)安裝，一旦安裝該更新用戶就無法再次使用 Flash Player，除非你重新安裝舊版本的操作系統(tǒng)并暫停更新。
02
HTML5開始接管一切
Flash退出并非一朝一夕，HTML5接管Flash的“身后”事了。
蘋果公司早在十幾年以前就不待見Flash了，那時(shí)喬布斯專門針對(duì)Flash發(fā)表了一篇通告，實(shí)際讀起來更像是批評(píng)。文中表示Flash的漏洞多、不安全、運(yùn)行效率低，還不適配觸屏，有著許多弊端。
在這之后，蘋果與谷歌都相繼停止了Flash在自家手機(jī)平臺(tái)上的支持，隨著HTML5在移動(dòng)化時(shí)代崛起，F(xiàn)lash也逐漸顯露出疲態(tài)。
2007年出現(xiàn)的iPhone一開始就不支持Flash，當(dāng)時(shí)正值Flash的頂峰。很多人起初對(duì)蘋果這一決定嗤之以鼻，但最后發(fā)覺原來增加續(xù)航的最好方法不是增大電池，而是拋棄Flash。于是，Android也在2012年宣布不再支持Flash，F(xiàn)lash在移動(dòng)市場(chǎng)不再有立足之地。
而在桌面市場(chǎng)，Chrome從2016年的Chrome 42開始，就已經(jīng)強(qiáng)制把Flash裝入沙箱，以PPAPI的形式運(yùn)行；在今年推出的Chrome 55中，更是默認(rèn)禁止Flash運(yùn)行。
……
效率、安全、穩(wěn)定性等等問題讓互聯(lián)網(wǎng)廠商對(duì)HTML5“怨聲載道”，但更多人認(rèn)為Flash的衰亡源于它的封閉性——Flash是一款A(yù)dobe公司私有的版權(quán)軟件。
對(duì)于微軟、谷歌、蘋果等互聯(lián)網(wǎng)科技巨頭而言，顯然不會(huì)希望在自己的互聯(lián)網(wǎng)服務(wù)和應(yīng)用中有其它人“卡脖子”。
于是乎，HTML5這樣屬于所有人的公開行業(yè)標(biāo)準(zhǔn)漸漸成為Flash的繼任者。
從2015年1月份開始，谷歌旗下視頻服務(wù)YouTube摒棄了Flash，改用HTML5作為默認(rèn)視頻格式；同年2月份，該公司開始將Flash廣告自動(dòng)轉(zhuǎn)換為HTML5廣告。
也在2015年12月，F(xiàn)lash的母公司Adobe也宣布將動(dòng)畫創(chuàng)作工具Flash Professional CC更名為Animate Professional CC，并加入對(duì)HTML5的支持，幫助開發(fā)人員創(chuàng)建更多Flash網(wǎng)站，廣告和動(dòng)畫電影。
再往后，流行游戲直播服務(wù)Twitch、微軟Edge瀏覽器等知名平臺(tái)和軟件都開始站到HTML5陣營(yíng)，HTML5也陸續(xù)“接管一切”。
03
全面開花的HTML5
HTML是一種公開、通用的網(wǎng)頁語言標(biāo)準(zhǔn)。Flash當(dāng)年能大獲成功，很大程度上是因?yàn)楫?dāng)時(shí)的HTML太菜。不過隨著蘋果、微軟等互聯(lián)網(wǎng)公司這些年來的不斷推進(jìn)，HTML5現(xiàn)在已經(jīng)能實(shí)現(xiàn)和Flash差不多的功能了。
HTML5，帶著眾多的優(yōu)點(diǎn)登場(chǎng)：
1、 它使頁面可直接播放多媒體元素，你可以忘掉第三方插件了；
2、 它的Web屬性帶來跨平臺(tái)能力，一次開發(fā)，各系統(tǒng)各終端普遍適用；
3、 它更加語義化、標(biāo)準(zhǔn)化，更加易用；
4、 本地存儲(chǔ)；
5、 它還具備實(shí)時(shí)更新能力，用戶只需刷新便可獲得最新內(nèi)容；
6、 它使內(nèi)容可被搜索引擎檢索，利于SEO；
7、 相對(duì)原生APP而言，它使你的產(chǎn)品無需安裝，易于分發(fā)；
……
自2014年7月底微信朋友圈《圍住神經(jīng)貓》的爆紅，到2014年10月份HTML5標(biāo)準(zhǔn)規(guī)范制定完成，無疑是HTML5進(jìn)入大眾視野并走熱的一年。
而游戲之外，微信小程序更將HTML5在國(guó)內(nèi)的應(yīng)用推向一個(gè)新高潮。
如今各大App的年終盤點(diǎn)頁面、搶紅包活動(dòng)之類，幾乎都是用HTML5技術(shù)實(shí)現(xiàn)的。就連以Flash游戲發(fā)家的4399網(wǎng)站，其中一些游戲也早就被“移植”成了HTML5版本。
04
HTML5當(dāng)下還差人們一個(gè)爆款
《圍住神經(jīng)貓》過去已經(jīng)7年了，HTML5默默接管Flash“身后”一切后，真的想要爆發(fā)，一定程度上還需要一個(gè)或幾個(gè)明星產(chǎn)品。
在朋友圈等社交網(wǎng)絡(luò)迅速傳播的HTML5游戲，能夠稱之為明星產(chǎn)品的少之又少。缺乏成功產(chǎn)品的帶動(dòng)，開發(fā)者的信心被打擊，進(jìn)而難以使得這類游戲產(chǎn)品迅速上量。
《圍住神經(jīng)貓》之后雖然仍有一些小游戲在社交網(wǎng)絡(luò)病毒式傳播，但是難以被人記住，甚至更多有著濃厚的商業(yè)廣告痕跡。
即使有產(chǎn)品獲得較好的成績(jī)，如《尋找房祖名》2日點(diǎn)擊超6000萬次、《愚公移山》月流水已達(dá)100萬左右，但整個(gè)行業(yè)的最大問題仍是變現(xiàn)能力有限，這決定了HTLM5游戲市場(chǎng)的發(fā)展速度。
當(dāng)然，游戲始終是最好的切入口，如果還能帶一些社交功能，那就如虎添翼了。雖然HTLM5當(dāng)下在終端消費(fèi)市場(chǎng)還未明顯出現(xiàn)爆炸式成長(zhǎng)，但發(fā)展中市場(chǎng)數(shù)以億計(jì)的用戶尚未擁有高端智能機(jī)意味著無限潛力。
谷歌內(nèi)部孵化器 Area 120便擴(kuò)展了基于 HTML5 的 GameSnacks 小游戲平臺(tái)。
其特點(diǎn)是基于 HTML5 構(gòu)建，得益于背后的設(shè)計(jì)理念，就算游戲題材和大小不盡相同，內(nèi)容的加載速度和資源開銷節(jié)流都更加優(yōu)秀。
GameSnacks 主管 Ani Mohan 在接受媒體采訪時(shí)稱，該平臺(tái)已積累百余款游戲和數(shù)以百萬計(jì)的用戶。
在巨頭的支持下， HTML5 的未來顯然是光明的，只不過《電腦報(bào)》的小伙伴們，要不要考慮現(xiàn)在開始努力學(xué)習(xí) HTML5 編程呢？
（編輯：張毅）
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
