前端添加视频流rtmp格式

最新推荐文章于 2024-07-12 11:09:26 发布
最新推荐文章于 2024-07-12 11:09:26 发布
阅读量823 收藏 1
点赞数
文章标签： 前端 git javascript ViewUI
原文链接：http://www.cnblogs.com/zhaozhenghao/p/11381784.html
版权

要求：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

转载于:https://www.cnblogs.com/zhaozhenghao/p/11381784.html

weixin_30898109
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flowplayer-3.2.8.
03-27
flowplayer-3.2.8 是一款用flex写的web视频播放器
Web-Rtmp: 使用 WebSocket 在网页上播放 RTMP 直播流
phymat.nico的专栏
06-19 3511
https://blog.csdn.net/weixin_34037173/article/details/86120075
用网页播放RTMP！
最新发布
m0_62231223的博客
07-12 2428
启动nginx-rtmp安装并配置nginx-rtmp模块，启动nginx服务。FFmpeg推流使用FFmpeg将RTMP流推送到nginx-rtmp服务器。设置WebSocket服务器启动脚本，将MPEG-TS流通过WebSocket传输。前端显示编写HTML页面，使用JSMpeg库通过WebSocket接收并播放视频流。完。
Flowplayer 动态切换视频内容
Cross
03-26 3297
本实例是关于Flowplayer动态切换视频内容的一小段代码，主要方式就是通过Javascript循环绑定播放按钮，url中添加实际的视频地址即可。 // loop those links and alter their click behaviour for (var i = 0; i < links.length; i++) { links[i].onclick = function
最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）
热门推荐
雷霄骅(leixiaohua1020)的专栏
02-25 21万+
本文继续上一篇文章，记录一些基于Flash的流媒体处理的例子。本文记录一些基于Flash技术的网页播放器。基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是“免插件安装”了，这一点可以很大的提高用户的体验质量。早些时候网络视频（尤其是直播）一般都使用ActiveX控件作为视频播放器，而这些控件并不普及，所以终端用户必须下载相关的插件才能收看节目，因而对很多不熟悉电脑的用户造成了很大的
flowplayer-3.2.8
10-22
flowplay插件完全版附带例子，用于前端播放器插件相关的技术
rtmp视频流播放-前端
02-19
本文将深入探讨RTMP视频流播放的前端实现，以及如何使用video.js这样的库来处理视频流源文件。 首先，让我们理解RTMP的基本概念。RTMP是一种专为音视频数据实时传输而设计的协议，它由Adobe Systems开发，主要用于...
vue播放rtmp视频流
03-06
### Vue 播放 RTMP 视频流 在现代前端开发中，视频播放功能是很多应用中的必备组件之一。特别是在需要实时传输视频的应用场景下，例如远程监控系统、在线教育平台等，RTMP（Real-Time Messaging Protocol）作为一种...
python处理RSTP视频流过程解析
09-18
需要注意的是，这种方法在本地测试时是可行的，但在实际的业务场景中，可能需要采用更为稳定和高效的方案，例如通过rtsp转rtmp的方式来进行视频流的转码和转发。这种方式可以优化视频流的传输效率，适应不同的网络...
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
10-14
在本文中，我们将深入探讨如何使用 Vue-Video-Player 实现监控设备的实时视频播放，特别是通过 RTMP 流。 1. **安装 Vue-Video-Player** 在 Vue 项目中安装 Vue-Video-Player 可以通过 npm 完成： ``` npm ...
nginx-rtmp.rar视频推拉流工具
04-12
总结起来，"nginx-rtmp.rar视频推拉流工具" 提供了一个便捷的解决方案，用于构建基于 RTMP 的视频流服务。无论是用于个人项目还是商业应用，都能有效简化实时音视频传输的实施过程，且前端使用 FLV 播放，兼容性良好...
flowplayer-3.2.18
03-30
flowplayer-3.2.18 web视频播放器demo，支持tomcat、weblogic等中间件服务器，Flowplayer 是一个开源（GPL 3的）WEB视频播放器。您可以将该播放器嵌入您的网页中，如果您是开发人员，您还可以自由定制和配置播放器相关参数以达到您要的播放效果。本文主要介绍Flowplayer的使用。Flowplayer支持播放flv、swf等流媒体以及图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。
flowplayer.js-video:FlowPlayer是一个用Flash开发的在Web上的网页flash播放器代码，你可以很容易地将它集成在任何的网页上使用。FlowPlayer提供了良好的用户体验，支持预加载，多次播放，播放列表，全屏播放模式等，可以支持HTTP以及流媒体传输。Flowplayer是一款开源软件，在该页面你同时可以下载到源代码。所以FlowPlayer也是一个flash播放器源码软件，你可以下载使用。它提供了一个简单的方法，在网站中嵌入视频播放器。这样可替换普通的FLV播放器，这其
03-22
FlowPlayer是一个用Flash开发的在Web上的网页flash播放器代码，你可以很容易地将它集成在任何的网页上使用。FlowPlayer提供了良好的用户体验，支持预加载，多次播放，播放列表，全屏播放模式等，还能支持HTTP以及流媒体传输。 所以FlowPlayer也是一个flash播放器源码软件，你可以下载使用。它提供了一个简单的方法，在网站中嵌入视频播放器。这样可作为普通的FLV播放器，这其中有大量的功能和非常灵活和强大的配置选项。
前端播放视频流（rtsp，rtmp,hls）.html
07-30
我這個内容就是博客上门的内容
在html5中播放RTSP/RTMP/HLS/HTTP视频流媒体的几种方案，并支持H.265
liveweb视频汇聚平台
08-17 4841
经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；
网页可以播放RTMP视频流,支持RTMP的网页播放器
liveweb视频汇聚平台
08-21 2407
对于这些要求，我们的视频流媒体服务器已经解决。我们研发的流媒体服务器自身支持对成功接入的摄像机实时视频进行7*24h录像，支持录像的检索与回放，并且支持网络硬盘录像机NVR按设备、通道、日期获取对应录像文件进行录像的检索与回放，无需安装各个安防厂商的视频播放插件。我们知道多数监控摄像头都是支持RTMP协议的，当然公安部的摄像头是支持GB28181协议的，这个我们在本文不做过多赘述，我们来探讨一下网页播放RTMP视频流的播放器。当然是可以的，但是对于PC端来说，网页播放RTMP流媒体视频流将会承受更多的。
html搭建rtmp,Nginx+rtmp搭建流媒体服务实现“直播”教程
weixin_42384267的博客
06-09 751
相信有了解的朋友们都知道：视频直播网站由三个部分构成：1.推流端、2.服务器、3.拉流端。在该示例项目中，推流端用“EV录屏“软件完成，服务器由”NGINX+RTMP模块“完成，拉流端使用“Video.js”完成。我的服务器环境如下：[[emailprotected] ~]# cat /etc/redhat-releaseCentOS Linux release 7.2.1511 (Core)[...
rtsp+rtmp多路网页播放
FHHHC的博客
10-23 2522
一、前言 　　之前博主有写过 一篇博文，讲的是使用videojs在谷歌浏览器网页上播放rtmp流媒体，具体可参考我之前的博客：https://www.cnblogs.com/FHC1994/p/9981440.html 　　最近又开始研究了一下网页播放流媒体，在这里我主要补充一些播放rtmp、rtsp流媒体的其他方法 二、rtsp和rtmp流媒体 2.1 视频传输原理 　　从网络上接收视频时首先...
基于网页实现RTMP流的web直播(监控)实现(利用树莓派ffmpeg实现推流)
qq_43556844的博客
02-03 3418
基于网页实现RTMP流的web直播(监控)实现(利用树莓派ffempg实现推流) 1、Linux上nginx-rtmp服务器的搭建 2、在树莓派上安装ffempg 在树莓派中的 ffmpeg 推流命令（将-t 10删除，则会一直进行推流） ffmpeg -ss 0 -t 10 -i /dev/video0 -f flv rtmp://(ip):(端口)/(nginx服务器应用)/(自定义应用) 配置后将网页放在nginx服务器的html文件夹中就可以访问。若有公网IP的话，将网页放在本地，而访问流的ip改
浏览器如何播放rtmp格式的视频流
05-17
要在浏览器中播放 RTMP 格式的视频流，需要使用 Flash 插件或者 JavaScript 库，例如 Video.js 和 JW Player。下面简单介绍一下如何使用这两个工具来播放 RTMP 格式的视频流： 1. Video.js：可以通过 videojs-flash 插件来支持 RTMP 格式的视频流播放。使用方法如下： ```html <head> <link href="//vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" /> <script src="//vjs.zencdn.net/7.11.4/video.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.0/videojs-flash.min.js"></script> </head> <body> <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"> <source src="rtmp://example.com/my-video" type="rtmp/mp4" /> </video> <script> var player = videojs("my-video", { plugins: { flash: {} } }); </script> </body> ``` 这里首先需要引入 Video.js 的 CSS 和 JavaScript 文件，然后再引入 videojs-flash 插件。在 HTML 中添加一个 video 标签，其中 source 标签的 src 属性指向 RTMP 格式的视频流地址，type 属性指定为 rtmp/mp4。最后使用 JavaScript 初始化 Video.js 播放器，并启用 flash 插件。 2. JW Player：JW Player 支持 RTMP 格式的视频流播放，使用方法如下： ```html <head> <script src="//cdn.jwplayer.com/libraries/EMD4uZy4.js"></script> </head> <body> <div id="my-player"></div> <script> var playerInstance = jwplayer("my-player"); playerInstance.setup({ file: "rtmp://example.com/my-video", type: "rtmp", width: 640, height: 264 }); </script> </body> ``` 这里需要引入 JW Player 的 JavaScript 文件。在 HTML 中添加一个 div 标签作为播放器容器，然后使用 JavaScript 初始化 JW Player 播放器，并设置 file 属性为 RTMP 格式的视频流地址，type 属性指定为 rtmp。还可以设置播放器的宽高等属性。 需要注意的是，上述方法都需要在服务器端支持 RTMP 协议才能正常播放视频流。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值