App下載

怎么使用HTML5實現(xiàn)rtmp流直播？實現(xiàn)方法分享！

夢在深巷 2021-08-16 10:19:44 瀏覽數(shù) (8012)
反饋

小編發(fā)現(xiàn)最近有個很火的直播推流的功能，那么今天我們就根據(jù)這個來說說有關(guān)于：“怎么使用HTML5實現(xiàn)rtmp流直播？”這個問題吧！希望小編的分享對于想學(xué)習(xí)的小伙伴們有所幫助！ 

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  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  target="_blank">supports HTML5 video</a>
    </p>
</video>

</body>

</html

2：然后用google瀏覽器打開，就是頁面上瘋狂報“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)截圖

然后就嘗試把這個改成“允許狀態(tài)”，居然就可以了。。

3：最后的實現(xiàn)的效果：

最后效果圖

那么以上的這些文章內(nèi)容就是有關(guān)于：“怎么使用HTML5實現(xiàn)rtmp流直播？”這個問題的全部內(nèi)容，更多有關(guān)于html5

這方面的相關(guān)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！


HTML5

0 人點贊