十年網(wǎng)站開發(fā)經(jīng)驗(yàn) + 多家企業(yè)客戶 + 靠譜的建站團(tuán)隊(duì)
量身定制 + 運(yùn)營維護(hù)+專業(yè)推廣+無憂售后,網(wǎng)站問題一站解決
解決方法:將 操作系統(tǒng)與瀏覽器適配。
成都網(wǎng)站建設(shè)公司更懂你!創(chuàng)新互聯(lián)公司只做搜索引擎喜歡的網(wǎng)站!成都網(wǎng)站制作前臺(tái)采用搜索引擎認(rèn)可的DIV+CSS架構(gòu),全站HTML靜態(tài),HTML5+CSS3網(wǎng)站,提供:網(wǎng)站建設(shè),微信開發(fā),微信小程序,商城開發(fā),手機(jī)APP定制開發(fā),域名申請,服務(wù)器租售,網(wǎng)站代托管運(yùn)營,微信公眾號(hào)代托管運(yùn)營。
判斷操作系統(tǒng)和瀏覽器種類和版本,這個(gè)不難。
目前的主流平臺(tái)一共5個(gè):
桌面平臺(tái):
Windows(完美支持H5和 Flash Player)
Mac OS X(完美支持 H5和 Flash Player)
Linux(支持 H5,F(xiàn)lash Player支持到11.2,Chrome對 Flash Player 支持更好)
移動(dòng)平臺(tái):
Android(支持 H5,Adobe已經(jīng)放棄Flash Player支持)
iOS(支持 H5, 不支持 Flash Player)
從上面可以看到,有半數(shù)以上的平臺(tái)(包括已經(jīng)放棄支持的)支持 Flash Player。既然超過了半數(shù),就有進(jìn)行切換的需求與可能。
最完美的情況,就是檢測操作系統(tǒng)和瀏覽器版本,根據(jù)不同情況進(jìn)行適配,例如:
Windows XP 系統(tǒng),IE6瀏覽器,使用 Flash Player 來播放視頻;
Mac OS X 系統(tǒng),使用 H5 來播放視頻;
移動(dòng)平臺(tái),必須使用 H5 ;
……
雖然在前端開發(fā)上有一定的成本(例如 Flash Player 和 H5 的界面適配、Desktop 和 Mobile 的界面適配,以及各種瀏覽器和平臺(tái)的組合之類的),但也不是不可承受。
讓我們來看看 Flash Player 與 H5 以及各個(gè)瀏覽器支持的視頻格式吧(下表來自HTML5 Video):
lt;img data-rawheight="270" data-rawwidth="823" src="" class="origin_image zh-lightbox-thumb" width="823" data-original=""gt;
也就是說,在支持 video 標(biāo)簽的 H5 瀏覽器中,并沒有一種視頻格式是所有瀏覽器通吃的。
如果覺得這個(gè)表不夠詳(zhuan)細(xì)(ye)的話,還可以看看下面這張圖(下表來自wikipedia HTML5 video):
lt;img data-rawheight="869" data-rawwidth="1423" src="" class="origin_image zh-lightbox-thumb" width="1423" data-original=""gt;
如果拋棄掉可愛又可憐的 Opera ,以及不考慮 Firefox 在 OS X 和 Linux 上的問題,我們確實(shí)可以說,MP4格式已經(jīng)是所有現(xiàn)代瀏覽器能夠直接支持的視頻格式(下表來自A/V Formats | The State of HTML5 Video Report):
lt;img data-rawheight="760" data-rawwidth="960" src="" class="origin_image zh-lightbox-thumb" width="960" data-original=""gt;
而實(shí)際上,已經(jīng)有公司在做這件事(而且做了好久),JWPlayer 是一個(gè)優(yōu)秀的 Flash Player 視頻播放器,后來開始支持 H5,下面是它的一些介紹:
HTML5 Video Player Flash Video Player
HTML5 Video Attributes Market Share Report
所以,技術(shù)上并不是問題。做還是不做,我猜測最大的原因是視頻格式轉(zhuǎn)換成本。
這些視頻網(wǎng)站已經(jīng)積累的大量的視頻資源,早期基本上是 Flash Only 的 FLV 格式。后期如果繼續(xù)用Flash Player 來播放視頻,為了實(shí)現(xiàn)高清的支持,很可能使用的是 MP4 的馬甲 F4V 格式。這兩種文件格式的標(biāo)準(zhǔn)可以看這里: F4V/FLV Technology Center。
FLV 格式早期使用過兩種編碼,分別是 Sorenson Spark 和 On2 VP6 (下表來自 拋棄FLV,迎接MP4——制作Flash Player支持的H.264視頻格式),這兩種格式 H5 肯定是不支持的。
lt;img data-rawheight="529" data-rawwidth="581" src="" class="origin_image zh-lightbox-thumb" width="581" data-original=""gt;
因此,要將現(xiàn)有的海量視頻數(shù)據(jù)轉(zhuǎn)換成 MP4,需要一個(gè)相當(dāng)?shù)倪^程,視頻網(wǎng)站可能考慮過這個(gè)過程比較漫長,就暫時(shí)將該工作擱置(或者正在平穩(wěn)進(jìn)行中)。
比如,YouTube 就已經(jīng)把自己的所有視頻轉(zhuǎn)向 WebM(這是 Google 推動(dòng)的視頻格式),可以看這里:YouTube Swiftly Converts Videos in WebM Format。
但 Google 畢竟是鈔票多到用不完,牛人多到一個(gè)團(tuán),從標(biāo)準(zhǔn)到產(chǎn)品到實(shí)現(xiàn)一條龍的一流公司。對于天朝這些小公司比如 愛X藝優(yōu)X庫馬鈴薯之類來說,除了技術(shù)市場鈔票廣告之外,還必須考慮國情。
在偉大而神奇的中國,大量的平臺(tái)依然是Windows XP + IE6 組合,讓這些系統(tǒng)升級(jí)到 IE8都嫌困難,更別提安裝 Chrome 和 Firefox 這種現(xiàn)代瀏覽器了。針對于它們,F(xiàn)lash Player 是唯一的選擇。既然用 Flash Player 來播放視頻,那么 FLV ?還是 MP4 顯然就無所謂了。
不過,一切都會(huì)改變的,至少在我們的有生之年,它們是一定會(huì)改過來的。
相比用 H5 全平臺(tái)看視頻,我更期待在有生之年登上月球(火星太遠(yuǎn)就不考慮了)。不過就目前科技的發(fā)展速度來看,有點(diǎn)兒懸。
另外吐槽題主3點(diǎn):
1. 不是所有人都買得起 MBP 的……
2. 發(fā)熱不能全怪在Flash Player 頭上……
3. 就算你一定要怪在 Flash Player 頭上,也不要僅僅是怪在視頻播放器頭上……
==================
2014-09-22更新:
按照評(píng)論里面的同學(xué)說的,我用 Android+Firefox 訪問了優(yōu)酷/土豆等網(wǎng)站,確實(shí),它們在移動(dòng)設(shè)備上已經(jīng)支持 H5了。
所以我上面猜測的 視頻格式轉(zhuǎn)換成本 的原因應(yīng)該是不存在的。
那么,我再次猜測,原因可能是以下幾點(diǎn):
1. Flash Player 在 PC 端的體驗(yàn)和表現(xiàn)更加一致,更容易管控播放器質(zhì)量和進(jìn)行版本迭代;
2. 由于前面講到的原因,H5 的支持在 Windows XP 上是無望的,只能使用 Flash Player,國內(nèi)企業(yè)必須考慮這點(diǎn);
3. 為什么不檢測瀏覽器版本實(shí)現(xiàn)不同平臺(tái)使用不同的播放器,參照1的解釋。
試了一下,有2個(gè)辦法實(shí)現(xiàn):
1、按下ctrl+shift+m,瀏覽器可以進(jìn)入響應(yīng)式設(shè)計(jì)模式,這個(gè)時(shí)候會(huì)默認(rèn)調(diào)用html5方式進(jìn)行視頻播放;
2、安裝擴(kuò)展:User-Agent Switcher,然后把瀏覽器偽裝成移動(dòng)端,即可激活html5模式。
1、打開Hbuilder,在項(xiàng)目管理器中放置mp4格式視頻點(diǎn)擊index.html進(jìn)入。
2、在這里通過紅色方框中的命令來建立一個(gè)HTML5的文件。
3、這個(gè)時(shí)候添加video元素就可以插入視頻了,用autoplay設(shè)置自動(dòng)播放,controls設(shè)置控制欄。
4、用source可以連接對應(yīng)的視頻資源;
5、完成以后左邊的是播放按鈕、視頻進(jìn)度控制條等工具。
6、而右邊可以調(diào)節(jié)聲音大小和全屏播放,有服務(wù)器的話還可以下載。
可以通過修改瀏覽器的UA來達(dá)到效果。
在Chrome中:
1、按F12,調(diào)出開發(fā)人員工具。
2、
3、
4、按F5刷新就可以用Html5觀看了。
HTML5?是下一代的 HTML。