HTML5播放實(shí)現(xiàn)rtmp流直播

發(fā)布時(shí)間：2020-06-16 16:32:19 作者：下輩子不做程序猿

這篇文章主要介紹了HTML5播放實(shí)現(xiàn)rtmp流直播,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

最近在做一個(gè)直播推流的功能，想自己寫個(gè)網(wǎng)頁(yè)進(jìn)行直播嘗試一下。

然后網(wǎng)上試了各種教程都沒(méi)成功，下面說(shuō)下遇到的幾個(gè)坑。

1.首先通過(guò)obs進(jìn)行推流，服務(wù)器是：rtmp://192.168.0.221/live，串流密鑰：1234，

然后就發(fā)現(xiàn)網(wǎng)上的教程里面都沒(méi)有說(shuō)道這個(gè)串流密鑰要寫在哪里，如果不寫的話，是直播不成功的。
后面試了很久發(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瀏覽器打開(kāi)，就是頁(yè)面上瘋狂報(bào)“No compatible source was found for this media”這個(gè)錯(cuò)誤，百度出來(lái)的都說(shuō)是要把網(wǎng)頁(yè)放到服務(wù)器上，不能直接打開(kāi)，但是這個(gè)用idea直接打開(kāi)的應(yīng)該也屬于放到服務(wù)器上了吧。不過(guò)應(yīng)該不能直接雙擊html文件打開(kāi)，我沒(méi)試過(guò)。完了還是不行啊，后面發(fā)現(xiàn)瀏覽器中flash是“詢問(wèn)”狀態(tài)，