要求：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. theme-sodareload sublime编辑器主题插件还不错，不是语法高亮

    theme-sodareload   sublime编辑器主题还不错,不是语法高亮

  2. SpringMVC使用ResponseEntity实现文件下载，及图片base64的字节数组上传于下载

    本文主要通过ResponseEntity<byte[]>实现文件下 该类实现响应头.文件数据(以字节存储).状态封装在一起交给浏览器处理以实现浏览器的文件下载. ResponseEntit ...

  3. 18.4.09 模拟考 zhx P75

    题目链接 https://files.cnblogs.com/files/lovewhy/P75.pdf P75 竞赛时间: ????年??月??日??:??-??:?? 注意事项(请务必仔细阅读) ...

  4. manjaro xfce4 使用super+D快捷键显示桌面（以及使用super+方向键调整窗口）设置无效

    xfce4 有两个地方设置快捷键:Keyboard -> application shortcuts 和 window manager -> keyboard. window manage ...

  5. Ansible 模式

    一.Ansible 命令 1.Ansible 命令执行的方式有两种:Ad-Hoc.Ansible-playbooks,这两种方式没有本质的区别,Ad-Hoc用于临时执行命令:Ansible-playb ...

  6. JS中的常用的代码操作

    本文件介绍常用的js代码的DOM操作.CSS操作.对象(Object对象.Array对象.Number对象.String对象.Math对象.JSON对象和Console对象)操作说明. 一.DOM树的 ...

  7. idea创建Web项目（基于Maven多模块）

    简述:通常我们开发的项目结构是由多个modules项目组合而成,并且由有个parent的maven项目整体管理.废话少说,直接进入创建过程. 创建parent项目 1.打开idea工具,按照下图操作, ...

  8. 关于Linux安装中NAT模式和桥接模式的区别详解

    1.一般我们在创建一个Linux虚拟机时候,会面临三个网络配置选择: 桥接模式.nat模式.host-only模式(主机模式,这个模式用得少,就不介绍了) 2.NAT模式: 所谓nat模式,就是虚拟系 ...

  9. 2.linux的增删改查

    一.增删改查       1.建立文件和目录         mkdir /tmp/xueying       2.cd 进入的路径         绝对路径:以根目录为其实目录的路径         ...

  10. php手记之01-tp5框架安装

    1.1.介绍 在web领域,PHP是所有编程语言中比较受欢迎的一门语言! PHP已经诞生出几十种编程框架!但国内最热门和使用率最好的框架有Thinkphp和Laravel这两款PHP框架! 1.2.为 ...