直播視頻插件--sewise player

直播視頻插件 -- sewise player

2017-1-9javascript

  由於公司要開發一個關於購車直播的新項目,須要在頁面引入直播視頻,項目組以前都沒有作過關於直播類型的項目,因此能夠說是真的從各類資源中篩選合適咱們的視頻插件,最後選擇了一個比較好上手的一個視頻插件 sewise player ,這個視頻插件能夠用來點播,也能夠用來直播,固然想作到短延遲和直播視頻的傳輸穩定仍是須要更多功能添加的。html

  咱們在作的時候藉助騰訊雲的rtmp推流直播軟件進行的測試直播,一方推流直播這邊收看直播,頁面的加載時間延遲取決於網絡的好壞,公司的網還能夠,因此簡單的測試的時候加載緩衝時間還能夠,不過直播時的延遲問題仍是一個亟待解決的問題;java

  項目中使用的是跨平臺直播視頻的案例,參考官方API demos中的m3u8_cross_platform.html文件;git

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

  插件的官方文檔地址爲:https://github.com/jackzhang1204/sewise-playerweb

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等任意平臺上,經過對應的瀏覽器播放視頻。api

  • Sewise Player使用很是簡單,只要在頁面對應的DIV內嵌入一個JS文件便可,播放器將經過自動識別瀏覽器的功能來啓用HTML5或Flash模式播放視 頻。您不須要掌握任何JavaScript或ActionScript編碼技術就能夠製做出專業的網頁視頻播放器。瀏覽器

  • Sewise Player便可以作爲單一的前臺播放器來在頁面上播放視頻和流,也能夠結合Sewise Server後臺技術實現專業的可交互的點播、直播視頻播放。tomcat

功能列表:

  • 支持HTML5,Flash視頻播放技術。
  • 支持多平臺,PC包括Windows, MacOS, Linux等。Mobile包括Android, IOS, Windows Phone等。
  • 支持多瀏覽器兼容,如IE6/7/8/9/十、Google Chrome、Firefox、safari、Opera等。
  • 支持多種視頻格式,如mp四、m3u八、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/開頭展現頁面。
相關文章
相關標籤/搜索