2017-1-9javascript
由於公司要開發一個關於購車直播的新項目,須要在頁面引入直播視頻,項目組以前都沒有作過關於直播類型的項目,因此能夠說是真的從各類資源中篩選合適咱們的視頻插件,最後選擇了一個比較好上手的一個視頻插件 sewise player ,這個視頻插件能夠用來點播,也能夠用來直播,固然想作到短延遲和直播視頻的傳輸穩定仍是須要更多功能添加的。html
咱們在作的時候藉助騰訊雲的rtmp推流直播軟件進行的測試直播,一方推流直播這邊收看直播,頁面的加載時間延遲取決於網絡的好壞,公司的網還能夠,因此簡單的測試的時候加載緩衝時間還能夠,不過直播時的延遲問題仍是一個亟待解決的問題;java
項目中使用的是跨平臺直播視頻的案例,參考官方API demos中的m3u8_cross_platform.html文件;git
下面就簡單的說一下這個視頻插件的介紹、功能及使用github
插件的官方文檔地址爲:https://github.com/jackzhang1204/sewise-playerweb
播放器是主要以HTML5技術爲平臺開發,同時兼容Flash技術,實現了跨平臺各瀏覽器兼容的視頻播放。使用Sewise Player您能夠在Windows, MacOS, Linux,Windows Phone, Android, IOS等任意平臺上,經過對應的瀏覽器播放視頻。api
Sewise Player使用很是簡單,只要在頁面對應的DIV內嵌入一個JS文件便可,播放器將經過自動識別瀏覽器的功能來啓用HTML5或Flash模式播放視 頻。您不須要掌握任何JavaScript或ActionScript編碼技術就能夠製做出專業的網頁視頻播放器。瀏覽器
Sewise Player便可以作爲單一的前臺播放器來在頁面上播放視頻和流,也能夠結合Sewise Server後臺技術實現專業的可交互的點播、直播視頻播放。tomcat
<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>
<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>
<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項目後,須要在tomcat部署的環境下,好比localhost:8080/project_name,不能直接右擊打開文件,以file/開頭展現頁面。