前端視頻播放初探總結，video標簽-視頻插件jwplayer

 

1.HTML5原生支持<video>

簡單使用：

<video src="../TestRes/test.mp4" autoplay controls></video>

html5的video標簽只支持mp4、webm、ogg三種格式,<video>原生支持的格式

https://developer.mozilla.org/zh-TW/docs/Web/HTML/Supported_media_formats

H.264已經占領視頻市場的80%。如果移動應用視頻，建議編譯成264格式，有好的高壓縮比、高畫質。簡單說H.264與mp4的關系。H.264，同時也是MPEG-4第十部分，是由ITU-T視頻編碼專家組（VCEG）和ISO/IEC動態圖像專家組（MPEG）聯合組成的聯合視頻組（JVT，Joint Video Team）提出的高度壓縮數字視頻編解碼器標准

2.js/jquery插件

• 比如視頻播放插件Video.js,Video.js 是一個通用的在網頁上嵌入視頻播放器的 JS 庫，Video.js 自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器.其實HTML5使用的仍然是<video>
• jW player也是比較常用的一款插件，作用同上.並且有android/ios的SDK. 並且支持交互，廣告等，我將在最后一部分寫一個簡單的Demo。
• 12個用於播放音樂和視頻文件的jQuery插件

包含音頻的插件庫 
http://www.jq22.com/jquery-plugins%E9%9F%B3%E9%A2%91%E5%92%8C%E8%A7%86%E9%A2%91-1-jq

3.CDN雲

如果是建設中小型的視頻播放網站或者直播網站，推薦使用視頻雲服務商，這方面做的好的有騰訊視頻雲，七牛直播雲,網易雲信,UCloud直播雲這些服務商有適於開發者的文檔和API，並且按需收費。

jwplayer的使用

插件分為免費版和收費版，免費版足夠個人使用

1)服務

• 1.填寫郵箱,然后在郵箱中設置密碼，完成注冊。
• 2.確定后進入[Dashboard] 
   
  右上角【Drag&Drop a file】上傳視頻文件，它會給我們生成不同分辨率的視頻，並且只用 
  <script src="//content.jwplatform.com/players/NcKoTIsi-Yo4JE2Tw.js"></script>就可以嵌入我們的網站（注：生成視頻過程需要時間）。

2)開發平台

2.1) 下載源碼，記得一定要在官網上登陸，登陸進入自己的Dashboard，進入Dashboard的左邊Tools欄目，各版本的下載就在下方。 
2.2) 引入jwplayer.js和key，key所在位置同2.1)

    <script src="//mywebsite.com/jwplayer/jwplayer.js"></script> <script>jwplayer.key="ABCdeFG123456SeVenABCdeFG123456SeVen==";</script>

 

初始化使用：

    <div id="myDiv">This text will be replaced with a player.</div> <script> jwplayer("myDiv").setup({ "file": "../assert/第1講：Axure原型作品演示.mp4", "image": "http://example.com/myImage.png", "height": 360, "width": 640 }); </script>