js前端rtmp直播流播放

目前所在公司在開發直播軟件類的項目,本人剛剛進入公司,插手項目pc站點的rtmp拉流,以及IM解析及發送,遇到的rtmp拉流播放問題總結一下:
一:關于直播流rtmp拉流使用的插件
? ? 目前使用的是阿里云的播放器SDK,而且版本由2.8.2更換成2.2.0!推流使用的是云信+深網,數據流使用的是騰訊云,總體來說還算可以能用!
? ? 說一下前期踩坑,前期看了video.js和騰訊的,以及另外一個不知名的sw什么的,其結果就是video的很多文檔是英文的,主站服務在國外,而且對播放的流視頻監控找不到方法(可能是個人問題沒找到,翻墻都沒有找到),以及無法對flash無法直接喚起,可能我引用的文檔有問題,以至于后來直接更換了,但是你別說video.js還是很好用的。
? ? 然后就是騰訊的,發現騰訊的真是B了狗了,文檔寫的也挺好,但是就是惡心到沒法用,然后嘗試了N下之后,果斷放棄!
? ? 然后就是嘗試的另外一個:player.sewise.com,當時忘了在那里找到的,后來查詢文檔的時候,發現主站都GG了,很多東西查不到了!
? ? 最后無奈就在同事的提醒下查了aliplayer,發現官網寫的很是詳細!基本都有,就是一些騷操作官網都有!阿里不愧是大廠!NB!
? ? 下面直接上代碼:


?<link rel="stylesheet" />

<script type="text/javascript" src="http://g.alicdn.com/de/prismplayer/2.2.0/aliplayer-min.js"></script>


上邊是我使用的資源文件
其他就更簡單了:


<div id="myplayer" cover=' x5-playsinline="" x-webkit-airplay="" playsinline="" webkit-playsinline="" ></div>


一個video標簽,然后就是js:


var player = new Aliplayer({

? ? ? ? id: "myplayer",

? ? ? ? autoplay: true,

? ? ? ? isLive:false,

? ? ? ? playsinline:true,

? ? ? ? width:"100%",

? ? ? ? height:"400px",

? ? ? ? controlBarVisibility:"always",

? ? ? ? useH5Prism:false,

? ? ? ? useFlashPrism:false,

? ? ? ? source:"rtmp://.........",

? ? ? ? cover:""

? ? });


至于一些監控的方法:


player.off('ready', function(e) {})

player.off('error', function(e) {})

player.off('play', function(e) {})

player.off('pause', function(e) {})

player.on('ready', function(e) {})

player.on('error', function(e) {})

player.on('play', function(e) {})

player.on('pause', function(e) {})


off解綁,on綁定

其他更多官網很詳細!

官網:https://help.aliyun.com/product/29932.html?spm=a2c4g.750001.list.72.27f97b13ezEqRe
選擇播放器SDK直接就是!希望對大家有幫助!

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容