1. 程式人生 > >前端視訊播放初探總結,video標籤-視訊外掛jwplayer

前端視訊播放初探總結,video標籤-視訊外掛jwplayer

1.HTML5原生支援<video>

簡單使用:

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

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

2.js/jquery外掛

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

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>

注意:如果div標籤在模板引擎中會報錯jwplayerModule.js:10 Uncaught TypeError: jwplayer(...).setup is not a function