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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
纯CSS3实现的8种Loading动画效果
Jul 05 HTML / CSS
css3的transition属性详解
Dec 15 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3 实现图形下落动画效果
Nov 13 HTML / CSS
html5记忆翻牌游戏实现思路及代码
Jul 25 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 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版(2)
2006/10/09 PHP
实用函数4
2007/11/08 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
PHP线程的内存回收问题
2016/07/08 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python简单实现两个任意字符串乘积的方法示例
2018/04/12 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
Python3+Appium安装使用教程
2019/07/05 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
企业军训感想
2014/02/07 职场文书
教师党员一句话承诺
2014/03/28 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
班主任对学生的评语
2014/04/26 职场文书
2014年妇女工作总结
2014/12/06 职场文书
网吧员工管理制度
2015/08/05 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python