html5 实现游戏直播,网页制作HTML5播放实现rtmp流直播

最近在做一个直播推流的功能,想自己写个网页进行直播尝试一下。

然后网上试了各种教程都没成功,下面说下遇到的几个坑。

1.首先通过obs进行推流,服务器是:rtmp://192.168.0.221/live,串流密钥:1234,

39c7ccd2a6b29da5b614cde3eedc4e47.png

然后就发现网上的教程里面都没有说道这个串流密钥要写在哪里,如果不写的话,是直播不成功的。

后面试了很久发现就是直接拼接在服务器地址后面的 ,像这样,rtmp://192.168.0.221/live/1234。

下面是具体的代码

HTML5 直播

width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">

//src里面填的是rtmp的地址rtmp://192.168.0.221/live跟密钥1234

To view this video please enable JavaScript, and consider upgrading to a web browser that

supports HTML5 video

2:然后用google浏览器打开,就是页面上疯狂报“No compatible source was found for this media”这个错误,百度出来的都说是要把网页放到服务器上,不能直接打开,但是这个用idea直接打开的应该也属于放到服务器上了吧。不过应该不能直接双击html文件打开,我没试过。完了还是不行啊,后面发现浏览器中flash是“询问”状态,

a1c11292f49f6651d79f348da2b22dcf.png

然后就尝试把这个改成“允许状态”,居然就可以了。。

3:最后的实现的效果:

99ed92fa383013be5b39b8ee04a6e971.png

到此这篇关于HTML5播放实现rtmp流直播的文章就介绍到这了,更多相关HTML5 rtmp流直播内容请搜索米云问答以前的文章或继续浏览下面的相关文章,希望大家以后多多支持米云问答!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值