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 相关文章推荐
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
利用CSS3实现开门效果实例源码
Aug 22 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
JS实现self的resend
2010/07/22 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
[13:38]2015国际邀请赛中国战队出征仪式
2015/05/29 DOTA
Python 文件重命名工具代码
2009/07/26 Python
python基础教程之python消息摘要算法使用示例
2014/02/10 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python中logging日志库实例详解
2020/02/19 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
生日礼品店创业计划书范文
2014/03/21 职场文书
优秀团员个人总结
2015/02/26 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
Django显示可视化图表的实践
2021/05/10 Python
python Tkinter模块使用方法详解
2022/04/07 Python