要求：rtmp格式，

　　　在线直播

　　　url地址

效果：

代码：初次打开时间较长，

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript" src="flowplayer-3.2.8.min.js"></script>

<title>FlowPlayer</title>

</head> 

<body>

    <!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->

    <a

         href="#"

         style="display:block;width:1040px;height:660px"

         id="player">

    </a>

    <!-- this will install flowplayer inside previous A- tag. -->

    <script>

    var urls = "rtmp://202.69.69.180:443/webcast/bshdlive-pc";

    flowplayer("player", "flowplayer-3.2.18.swf",{

        clip: {

          url: urls,

          provider: 'rtmp',

          live: true,

        },

        plugins: {

           rtmp: {

             url: 'flowplayer.rtmp-3.2.8.swf',

             netConnectionUrl: urls

           }

       }

    });

    </script>

</body>

</html>

需要引入的文件：点击下载

flowplayer.controls-3.2.16.swf

flowplayer.rtmp-3.2.8.swf

flowplayer-3.2.8.min.js

flowplayer-3.2.18.swf

或者直接从github下载：https://github.com/zhaozhenghao/videoRtmp.git

rtmp视频直播公网测试地址：https://blog.csdn.net/qq_35366269/article/details/90475372

前端添加视频流rtmp格式的更多相关文章

  1. arguments.callee 调用函数自身用法----JSON.parse()和JSON.stringify()前端js数据转换json格式

    arguments.callee 调用函数自身用法 arguments.callee 在哪一个函数中运行,它就代表哪个函数. 一般用在匿名函数中. 在匿名函数中有时会需要自己调用自己,但是由于是匿名函 ...

  2. SpringBoot学习笔记（4）：与前端交互的日期格式

    SpringBoot学习笔记(4):与前端交互的日期格式 后端模型Date字段解析String 我们从前端传回来表单的数据,当涉及时间.日期等值时,后端的模型需将其转换为对应的Date类型等. 我们可 ...

  3. 前端页面播放 rtmp 流与 flv 格式视频文件

    技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放 使用到 插件 : videojs + ckplayer 遇到的 ...

  4. 如何解决前端传来的时间格式与mysql表中时间格式不匹配的查询问题

    前端传过来的时间格式为“2016-07-11 11:13:10”,而数据表中对应字段`add_time`的格式为“2016-7-11”,此时sql不能直接用 "where `add_time ...

  5. zabbix 修改输出web前端图片的日期格式

    zabbix并没有给定一个全局或者用户级别的时间格式定义方式. 实在看不惯的话,可以自己修改源代码来实现修改. 暂时研究了半小时,先把展示图片修改了. 后续有更严谨的方案,再更新此文吧. ------ ...

  6. 前端js日期时间格式转换

    前端前后端接口处理时经常会遇到需要转换不同时间格式的情况,比如时间戳格式转换成正常日期显示来进行前端展示. 下面是分享一些不同格式的日期转换函数方法. /** * 时间戳转时间 * @param {S ...

  7. Spring MVC 后端获取前端提交的json格式字符串并直接转换成control方法对应的参数对象

    场景: 在web应用开发中,spring mvc凭借出现的性能和良好的可扩展性,导致使用日渐增多,成为事实标准,在日常的开发过程中,有一个很常见的场景:即前端通过ajax提交方式,提交参数为一个jso ...

  8. 前端获取Base64字符串格式图片Ajax到后端处理

    前端获取到的Base64字符串格式图片一般都是经过处理的图片,例如:裁剪过后的,这里假设data为获取到的Base64字符串格式图片 Base64格式图片的格式为 “data:image/png;ba ...

  9. zabbix前端添加平台脚本监控

    1.在前端创建脚本 2.添加监控配置 # 这里添加的监控为ping命令,用来探测网络的可用性. # 这里添加的监控为traceroute命令,用来探测网络的可用性. # 这里添加的监控为nmap命令, ...

随机推荐

  1. 物联网之窄带物联网（NB-IOT）

    NB-IoT即窄带物联网(Narrow Band Internet of Things),NB-IOT构建在蜂窝网络之上,只消耗大约180KHZ的带宽,可直接部署于GSM(2G).UMTS(3G).L ...

  2. unsafe包的学习和使用

    Go语言之unsafe包介绍及使用 unsafe内容介绍 type ArbitraryType int type Pointer *ArbitraryType func Sizeof(x Arbitr ...

  3. trigger 和 triggerHandler()，自定义事件

    trigger 和 triggerHandler(),自定义事件 语法: $(selector).trigger(event,[param1,param2,...]) 1,event 必需.规定指定元 ...

  4. [剖析] 多路径ALUA技术如何优化I/O处理

    什么是ALUA多路径机制 ALUA是异步逻辑单元访问(Asymmetric Logical Unit Access)的缩写,ALUA是SPC3 (SCSI Primary commands-3)协议中 ...

  5. P2313 [HNOI2005]汤姆的游戏

    题目描述 汤姆是个好动的孩子,今天他突然对圆规和直尺来了兴趣.于是他开始在一张很大很大的白纸上画很多很多的矩形和圆.画着画着,一不小心将他的爆米花弄撒了,于是白纸上就多了好多好多的爆米花.汤姆发现爆米 ...

  6. NetworkX系列教程(10)-算法之一:最短路径问题

    小书匠Graph图论 重头戏部分来了,写到这里我感觉得仔细认真点了,可能在NetworkX中,实现某些算法就一句话的事,但是这个算法是做什么的,用在什么地方,原理是怎么样的,不清除,所以,我决定先把图 ...

  7. 使用Ajax和一般处理程序实现文件上传与下载

    1.使用HTML的input标签 <input type="file" multiple="multiple" id="file_load&qu ...

  8. Kalman实际应用总结

    目录 Kalman理论介绍 一. 简单理论介绍理论 二. 升华理论介绍 Kalman基本应用 一. Kalman跟踪/滤波 二. Kalman预测/融合(单传感器) 三. Kalman多传感器融合A ...

  9. js自动访问数据库

    js自动访问数据库 maven依赖 <dependencies> <dependency> <groupId>junit</groupId> <a ...

  10. git前期准备

    git小结 设置用户名 git config –global user.name 'itcast' 设置用户名邮箱 git config –global user.email 'itcast' 查看设 ...