HTML5播放实现rtmp流直播


Posted in HTML / CSS onJune 16, 2020

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

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

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

HTML5播放实现rtmp流直播

然后就发现网上的教程里面都没有说道这个串流密钥要写在哪里,如果不写的话,是直播不成功的。
后面试了很久发现就是直接拼接在服务器地址后面的 ,像这样,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是“询问”状态,

HTML5播放实现rtmp流直播

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

3:最后的实现的效果:

HTML5播放实现rtmp流直播

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

HTML / CSS 相关文章推荐
CSS3使用transition实现的鼠标悬停淡入淡出
Jan 09 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
Mar 29 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 #HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
Jun 15 #HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 #HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 #HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 #HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
Jun 09 #HTML / CSS
h5移动端调用支付宝、微信支付的实现
Jun 08 #HTML / CSS
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
tornado捕获和处理404错误的方法
2014/02/26 Python
python Django批量导入数据
2016/03/25 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python实现的IP端口扫描工具类示例
2019/02/15 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python3+Appium安装使用教程
2019/07/05 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
别名指示符是什么
2012/10/08 面试题
机修工工作职责
2014/02/21 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
2014年班组长工作总结
2014/11/20 职场文书
毕业典礼邀请函
2015/01/31 职场文书
消防安全主题班会
2015/08/12 职场文书