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动画animation实现云彩向左滚动
May 09 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
Jan 09 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 HTML / CSS
详解flex:1什么意思
Jul 23 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 set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
zend framework多模块多布局配置
2011/02/26 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
纯js实现悬浮按钮组件
2016/12/17 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
linux安装Python3.4.2的操作方法
2018/09/28 Python
python并发和异步编程实例
2018/11/15 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
.net面试题
2015/12/22 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
车间主任岗位职责
2014/03/16 职场文书
学校搬迁方案
2014/06/15 职场文书
公司演讲稿开场白
2014/08/25 职场文书
社区母亲节活动总结
2015/02/10 职场文书
雾霾停课通知
2015/04/24 职场文书
教师培训简讯
2015/07/20 职场文书
思想工作总结范文
2015/08/12 职场文书
成人成长感言如何写?
2019/08/16 职场文书
导游词之临安白水涧
2019/11/05 职场文书