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属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
HTML5 drag和drop具体使用详解
Jan 18 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 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字符编码转换之gb2312转为utf8
2013/10/28 PHP
php实现图片添加水印功能
2014/02/13 PHP
php 类自动载入的方法
2015/06/03 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
highchart数据源纵轴json内的值必须是int(详解)
2017/02/20 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
python自定义时钟类、定时任务类
2021/02/22 Python
简单了解Python write writelines区别
2020/02/27 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
办公室主任主任岗位责任制
2014/02/11 职场文书
文明寝室申报材料
2014/05/12 职场文书
公司奖励通知
2015/04/21 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
asyncio异步编程之Task对象详解
2022/03/13 Python