直播視頻插件 -- sewise player

2017-1-9

　　因為公司要開發一個關於購車直播的新項目，需要在頁面引入直播視頻，項目組之前都沒有做過關於直播類型的項目，所以可以說是真的從各種資源中篩選合適我們的視頻插件，最后選擇了一個比較好上手的一個視頻插件 sewise player ，這個視頻插件可以用來點播，也可以用來直播，當然想做到短延遲和直播視頻的傳輸穩定還是需要更多功能添加的。

　　我們在做的時候借助騰訊雲的rtmp推流直播軟件進行的測試直播，一方推流直播這邊收看直播，頁面的加載時間延遲取決於網絡的好壞，公司的網還可以，所以簡單的測試的時候加載緩沖時間還可以，不過直播時的延遲問題還是一個亟待解決的問題；

　　項目中使用的是跨平台直播視頻的案例，參考官方API demos中的m3u8_cross_platform.html文件；

　　下面就簡單的說一下這個視頻插件的介紹、功能及使用

　　插件的官方文檔地址為：https://github.com/jackzhang1204/sewise-player

Sewise Player是一款專業的免費網頁HTML5視頻、流播放器，它功能強大，體積小，跨平台，兼容性好，使用方便簡潔。

• 播放器是主要以HTML5技術為平台開發，同時兼容Flash技術，實現了跨平台各瀏覽器兼容的視頻播放。使用Sewise Player您可以在Windows, MacOS, Linux，Windows Phone, Android, IOS等任意平台上，通過對應的瀏覽器或者APP中基於WebView播放視頻。
• Sewise Player使用非常簡單，只要在頁面對應的DIV內嵌入一個JS文件即可，播放器將通過自動識別瀏覽器的功能來啟用HTML5或Flash模式播放視頻。您不需要掌握任何JavaScript或ActionScript編碼技術就可以制作出專業的網頁視頻播放器。
• Sewise Player即可以做為單一的前台播放器來在頁面上播放視頻和流，也可以結合Sewise Server后台技術實現專業的可交互的點播、直播視頻播放。

播放器運行原理:

• 第一步：頁面加載sewise.player.min.js文件后，該腳本會將相應的參數解析出來，並檢查出當前的設備平台、瀏覽器特性，同時還會根據JS文件的路徑取出host地址，用於播放地址請求。
• 第二步：通過分析出來的vod與type參數與及瀏覽器特性，來確定播放器是啟用HTML5還是Flash模塊。對於不同平台和瀏覽器同時支持的視頻格式或流協議，將優先啟用HTML5播放模塊。
• 第三步：加載對應的皮膚文件與庫文件。
• 第四步：在皮膚加載完成后將根據給定的參數來初始化播放器。播放器初始化完成后，開始播放視頻、流同時會在當前頁面中回調playerReady()（HTML5或Flash播放器都會回調playerReady方法，表示播放器API接口已可用）等相應的播放器回調方法。

特點：

• 播放器是主要以HTML5技術為平台開發，同時兼容Flash技術，實現了跨平台各瀏覽器兼容的視頻播放。使用Sewise Player您可以在Windows, MacOS, Linux，Windows Phone, Android, IOS等任意平台上，通過對應的瀏覽器播放視頻。

• Sewise Player使用非常簡單，只要在頁面對應的DIV內嵌入一個JS文件即可，播放器將通過自動識別瀏覽器的功能來啟用HTML5或Flash模式播放視 頻。您不需要掌握任何JavaScript或ActionScript編碼技術就可以制作出專業的網頁視頻播放器。

• Sewise Player即可以做為單一的前台播放器來在頁面上播放視頻和流，也可以結合Sewise Server后台技術實現專業的可交互的點播、直播視頻播放。

功能列表：

• 支持HTML5，Flash視頻播放技術。
• 支持多平台，PC包括Windows, MacOS, Linux等。Mobile包括Android, IOS, Windows Phone等。
• 支持多瀏覽器兼容，如IE6/7/8/9/10、Google Chrome、Firefox、safari、Opera等。
• 支持多種視頻格式，如mp4、m3u8、oga、webm、theora、flv、f4v等。
• 支持多種協議直播流，如rtmp、hls、http等。
• 支持Flash播放m3u8文件，以及AES-128解碼播放。
• 支持PC與Mobile平台播放器自動識別功能。
• 支持瀏覽器HTML5與Flash特性檢測。
• 支持HTML5不同視頻格式地址Fallback兼容播放功能。
• 支持Flash Fallback到HTML5視頻播放功能。
• 支持播放地址AMF, AJAX, JOSNP類型請求。
• 支持自定義HTML5與Flash皮膚，讓您無需了解專業的編碼技術也可以制作出超烗風格的皮膚。
• 支持前置廣告（swf, 圖片, 視頻）。
• 支持字幕。
• 支持多種播放參數設定，並支持啟動參數設置。
• 支持豐富的api接口，以此可以快速打造功能強大的插件。

頁面播放器嵌入方式：　

• setup方式嵌入播放器。

<div style="width: 640px; height: 360px; ">  <script type="text/javascript" src="../player/sewise.player.min.js"></script>  <script type="text/javascript">  SewisePlayer.setup({  server: "vod",  type: "mp4",  videourl: "http://jackzhang1204.github.io/materials/mov_bbb.mp4",  skin: "vodWhite",  title: "Tile 標題",  lang: 'zh_CN',  fallbackurls:{  ogg: "http://jackzhang1204.github.io/materials/mov_bbb.ogg",  webm: "http://jackzhang1204.github.io/materials/mov_bbb.webm"  }  });  </script> </div>

• 點播，實際地址播放。

<div style="width: 640px; height: 360px; ">  <script type="text/javascript" src="../player/sewise.player.min.js?server=vod&type=mp4&videourl=http://www.w3schools.com/html/mov_bbb.mp4&sourceid=&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=VodVideo&buffer=5&skin=vodWhite"></script> </div>

• 點播，節目ID播放。

<div style="width: 640px; height: 360px; ">  <script type="text/javascript" src="http://219.232.161.202/libs/swfplayer/player/sewise.player.min.js?server=vod&sourceid=eQgPHj4N&autostart=true&starttime=0&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&buffer=5&skin=vodWhite"></script> </div>

• 直播，實際地址播放。

<div style="width: 640px; height: 360px; ">  <script type="text/javascript" src="../player/sewise.player.min.js?server=live&type=rtmp&streamurl=rtmp://219.232.161.204/livestream/mtzysunq&autostart=true&pid=&shifttime=&buffer=5&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&title=LiveVideo&skin=liveWhite"></script> </div>

• 直播，節目ID播放。

<div style="width: 640px; height: 360px; ">  <script type="text/javascript" src="http://219.232.161.204/libs/swfplayer/player/sewise.player.min.js?server=live&autostart=true&pid=vk5nx2cj&shifttime=&buffer=5&lang=en_US&logo=http://onvod.sewise.com/libs/swfplayer/skin/images/logo.png&skin=liveWhite"></script> </div>

播放器參數：

• Sewise Player播放器提供了靈活的參數設置功能，通過設置不同的參數值可以讓播放器具有不同的播放特性。
• 詳細參數說明，見：github官網API中 參數說明.md文件。

API接口調用：

• Sewise Player播放器對外提供了豐富的API接口，通過API接口調用可以輕松控制播放器播放。
• 詳細接口說明，見：github官網API中 接口說明.md文件。

特別注意:導入sewise player項目后，需要在tomcat部署的環境下,比如localhost:8080/project_name,不能直接右擊打開文件，以file/開頭展示頁面。