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背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
详解H5本地储存Web Storage
Jul 03 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 HTML / CSS
HTML基本元素标签介绍
Feb 28 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实现简易聊天室应用代码
2015/09/23 PHP
php验证手机号码
2015/11/11 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
JavaScript的Cookies
2008/01/16 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
javascript函数作用域学习示例(js作用域)
2014/01/13 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[01:10:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第一场 3月4日
2021/03/11 DOTA
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python中偏函数partial用法实例分析
2015/07/08 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
快速创建python 虚拟环境
2020/11/28 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
市场营销专业自荐书
2014/06/10 职场文书
历史学专业求职信
2014/06/19 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL