1.HTML5原生支持<video>

簡(jiǎn)單使用：

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

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

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

H.264已經(jīng)占領(lǐng)視頻市場(chǎng)的80%。如果移動(dòng)應(yīng)用視頻，建議編譯成264格式，有好的高壓縮比、高畫(huà)質(zhì)。簡(jiǎn)單說(shuō)H.264與mp4的關(guān)系。H.264，同時(shí)也是MPEG-4第十部分，是由ITU-T視頻編碼專(zhuān)家組（VCEG）和ISO/IEC動(dòng)態(tài)圖像專(zhuān)家組（MPEG）聯(lián)合組成的聯(lián)合視頻組（JVT，Joint Video Team）提出的高度壓縮數(shù)字視頻編解碼器標(biāo)準(zhǔn)

2.js/jquery插件

• 比如視頻播放插件Video.js,Video.js 是一個(gè)通用的在網(wǎng)頁(yè)上嵌入視頻播放器的 JS 庫(kù)，Video.js 自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況，如果不支持 HTML5 則自動(dòng)使用 Flash 播放器.其實(shí)HTML5使用的仍然是<video>
• jW player也是比較常用的一款插件，作用同上.并且有android/ios的SDK. 并且支持交互，廣告等，我將在最后一部分寫(xiě)一個(gè)簡(jiǎn)單的Demo。
• 12個(gè)用于播放音樂(lè)和視頻文件的jQuery插件

包含音頻的插件庫(kù)
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云

如果是建設(shè)中小型的視頻播放網(wǎng)站或者直播網(wǎng)站，推薦使用視頻云服務(wù)商，這方面做的好的有騰訊視頻云，七牛直播云,網(wǎng)易云信,UCloud直播云這些服務(wù)商有適于開(kāi)發(fā)者的文檔和API，并且按需收費(fèi)。

jwplayer的使用

插件分為免費(fèi)版和收費(fèi)版，免費(fèi)版足夠個(gè)人使用

1)服務(wù)

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

2)開(kāi)發(fā)平臺(tái)

2.1) 下載源碼，記得一定要在官網(wǎng)上登陸，登陸進(jìn)入自己的Dashboard，進(jìn)入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>

注意：如果div標(biāo)簽在模板引擎中會(huì)報(bào)錯(cuò)jwplayerModule.js:10 Uncaught TypeError: jwplayer(...).setup is not a function

參考閱讀
- <video>的使用方法-MDN
- HTML原生視頻格式之爭(zhēng)
- H.264贏下視頻格式大戰(zhàn)已十拿八穩(wěn)，五分之四的視頻采用該格式
- http://caniuse.com#search=video
- PHP+FFMPEG自動(dòng)轉(zhuǎn)碼H264標(biāo)準(zhǔn)Mp4文件
- html5視頻播放解決方案
- 知乎-視頻播放插件

總結(jié)

以上是生活随笔為你收集整理的前端视频播放初探总结，video标签-视频插件jwplayer的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。