HTML5播发⊙ω⊙完成rtmp流直播间

日期:2021-01-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

近期在做一个直播间推流的作用,想自身写个网页页面开展直播间试着一下。

随后在网上试了各种各样实例教程都没取得成功,下边说下碰到的好多个坑。

1.最先根据obs开展推流,网络服务器是:rtmp://192.168.0.221/live,串流密匙:1234,

随后就发觉在网上的实例教程里边也没有讲到这一串流密匙要写在哪儿里,假如不写得话,是直播间不了功的。
后边试了好长时间发觉便是立即拼凑在网络服务器详细地址后边的 ,像那样,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访问器开启,便是网页页面上瘋狂报“No compatible source was found for this media”这一不正确,百度搜索出去的都说成要把网页页面放进网络服务器上,不可以立即开启,可是这一用idea立即开启的应当也归属于放进网络服务器到了吧。但是应当不可以立即双击鼠标html文档开启,我没用过。完后還是不好啊,后边发觉访问器中flash是“了解”情况,

随后就试着把这一改为“容许情况”,竟然便可以了。。

3:最终的完成的实际效果:

到此这篇有关HTML5播发完成rtmp流直播间的文章内容就详细介绍到这了,大量有关HTML5 rtmp流直播间內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!