最近在做一個直播推流的功能,想自己寫個網(wǎng)頁進(jìn)行直播嘗試一下。
然后網(wǎng)上試了各種教程都沒成功,下面說下遇到的幾個坑。
1.首先通過obs進(jìn)行推流,服務(wù)器是:rtmp://192.168.0.221/live,串流密鑰:1234,
然后就發(fā)現(xiàn)網(wǎng)上的教程里面都沒有說道這個串流密鑰要寫在哪里,如果不寫的話,是直播不成功的。
后面試了很久發(fā)現(xiàn)就是直接拼接在服務(wù)器地址后面的 ,像這樣,rtmp://192.168.0.221/live/1234。
下面是具體的代碼
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 直播</title> <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/5.19/video.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script> </head> <body> <video id="myvideo" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}"> <source src="rtmp://192.168.0.221/live/1234" type="rtmp/flv">//src里面填的是rtmp的地址rtmp://192.168.0.221/live跟密鑰1234 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p> </video> </body> </html>
2:然后用google瀏覽器打開,就是頁面上瘋狂報(bào)“No compatible source was found for this media”這個錯誤,百度出來的都說是要把網(wǎng)頁放到服務(wù)器上,不能直接打開,但是這個用idea直接打開的應(yīng)該也屬于放到服務(wù)器上了吧。不過應(yīng)該不能直接雙擊html文件打開,我沒試過。完了還是不行啊,后面發(fā)現(xiàn)瀏覽器中flash是“詢問”狀態(tài),
然后就嘗試把這個改成“允許狀態(tài)”,居然就可以了。。
3:最后的實(shí)現(xiàn)的效果:
到此這篇關(guān)于HTML5播放實(shí)現(xiàn)rtmp流直播的文章就介紹到這了,更多相關(guān)HTML5 rtmp流直播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:池州 遼源 永州 棗莊 青島 西藏 新疆 漯河
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《HTML5播放實(shí)現(xiàn)rtmp流直播》,本文關(guān)鍵詞 HTML5,播放,實(shí)現(xiàn),rtmp,流,直播,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。