RTMP 在浏览器端播放

最新推荐文章于 2024-05-15 19:58:35 发布
最新推荐文章于 2024-05-15 19:58:35 发布
阅读量2.8w 收藏 9
点赞数
分类专栏： javascript 文章标签： RTMP flash 直播
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014452812/article/details/93206943
版权

RTSP、RTMP 也有很多在说的。然而我就是总结下我最近在使用RTMP的理解。

首先说一下RTMP协议的定义, 实时消息协议（英语：Real-Time Messaging Protocol，缩写RTMP）也称实时消息传输协议，是最初由Macromedia为通过互联网在Flash播放器与一个服务器之间传输流媒体音频、视频和数据而开发的一个专有协议。Macromedia后被Adobe Systems收购，该协议也已发布了不完整的规范供公众使用。

 也就是说RTMP协议是在 flash 播放器上播放的。所以对于H5的video播放器是不能播放的。

如果你的PM说只能在H5的video 播放器上播放，那么你就要和后台的同事沟通了，想办法让他把视频再转码成 .m3u8结尾的 http协议了。

对RTMP协议的视频地址播放，基本上可以理解为 flash 视频播放。那么这样的方法就很多了，我说一下我的方法 flowplayer

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>直播</title>

	<link rel="stylesheet" href="css/video-js.css">
	<link rel="stylesheet" href="css/h5splayer.css">
	
	<script src="./js/flowplayer-3.2.13.min.js"></script>
	
</head>
<body>

	<div class="h5video" id="playerDiv1"></div>
	
	<script>
		
		var url = 'rtmp://地址';

		var oPlayerDiv = document.getElementById('playerDiv1');

		var idStr = 'playerDiv1',
				swfStr = "swf/flowplayer-3.2.18.swf",
				obj = {
					clip: {
						provider: 'rtmp',
						bufferLength: 0,
						bufferTime: 0,
						autoPlay: true,
						live: true
					},
					plugins: {
						rtmp: {
							url: "flowplayer.rtmp-3.2.13.swf",
							netConnectionUrl: url
						}
					}
				};

		flowplayer(idStr, swfStr, obj);

	</script>

</body>
</html>

 

Marchanges
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
html5播放rtmp流ohr,PC端播放rtmp和hls视频流
weixin_26766559的博客
06-15 1018
本文将会介绍如何在网页端上实现直播的播放。hls播放videojs如果我们要让我们的网页支持在所有浏览器上播放，我们就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。下面是一个播放的例子。你可以将source标签下的src换成你自己的直播流地址。需要注意的是rtmp流的type是rtmp/flv(flv 跟推流的时候FFm...
rtmp流网页播放器
09-07
rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器rtmp流网页播放器
浏览器web原生播放 rtmp,rtsp(h264, h265),flv, hls 的解决方案
liveweb视频汇聚平台
07-25 2632
支持协议：RTSP、RTMP、HLS、HTTP-FLV、WebSocket-FLV、GB28181、HTTP-TS、WebSocket-TS、HTTP-fMP4、WebSocket-fMP4、MP4、WebRTC。
【前端】rtsp 与 rtmp 视频流的播放方法(1)
最新发布
2301_79099606的博客
05-15 635
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Web浏览器没有Flash如何播放RTMP协议直播
郎涯技术
01-20 4947
各大主流浏览器在很早的时候就已声明 2020 年底不支持 Adobe Flash。所以已经线上运行的项目以及涉及直播的项目，都会涉及一个问题 ： “没有 Adobe Flash 在 Web 浏览器端如何播放 RTMP 直播流？” 还好有先见之明，我参与涉及直播的项目已经在 20 年初提前解决了该问题 1、优选方案 需要流媒体服务器支持某种播放协议，例如HTTP-FLV、HLS等协议 Web 浏览器 HTTP-FLV、HLS 移动浏览器 HLS、FLV（需要考虑兼容性） 移动Native or
rtsp直播流转换成rtmp流在浏览器正常播放（Windows命令行，Java代码)
Mr_XiMu的博客
10-15 7139
rtsp直播流转换成rtmp流在浏览器正常播放（Windows命令行，Java代码)
浏览器播放RTSP、RTMP等几种编码格式视频流
weixin_44989721的博客
12-27 1万+
项目需求，需要前端页面实时展示摄像头采集的视频，视频啊，之前一点没接触过，经过一番调研、尝试，不得不说，网上文章真的大同小异，踩过许多坑，整理如下。 一、科普一下 1.流程 2.常见视频流格式 ● RTMP（推流端、拉流端） ● RTSP（推流端） ● HLS（拉流端） ● FLV（拉流端） 3.FLV ● 原生video标签只支持Ogg、MPEG4、WebM三种格式 ● 默认需要安装flash插件才可以播放 ● bilibili开源flv.js插件可直接转码，vue项目直接使用 ○ 推流端视频编码必须是
【Java+ffmpeg+Node-media-server+nginx】实现B/S结构项目的浏览器端RTMP播放
qq_26546227的博客
03-14 836
随着浏览器版本升级，新版本的浏览器都已经不在支持Flash插件，所以浏览器端无法直接对RTMP协议的流进行解析并播放，需要通过一些其它手段解决浏览器端RTMP流的播放问题。
如何在IE浏览器播放RTSP或RTMP流
乐学吧
06-19 2630
好多开发者一直苦恼于如何在IE浏览器环境下，构建低延迟的RTSP或RTMP播放，对于RTSP流来说，好多公司通常的做法是把RTSP转RTMP，然后分发到RTMP服务器，然后服务器转http-flv出来，浏览器直接播放http-flv流，亦或通过flash控件直接播放RTMP流，还有就是，转hls流出来，缺点是hls流延迟更大。 以上方案未尝不可，如果对播放体验和延迟要求更高，最简单的做法是直接在...
Web端rtmp视频流的预览
qq_28838647的博客
10-11 1287
Web端rtmp视频流的预览
RTMP视频流播放的浏览器插件
06-27
"RTMP视频流播放的浏览器插件"是专为IE11设计的解决方案，允许用户在浏览器内观看RTMP流媒体内容。这种插件通常会集成Flash技术，因为Flash在过去的浏览器中常用于处理流媒体内容，尽管现在已经被更现代的技术如...
rtmp视频流web浏览器播放
07-26
描述中提到的项目“rtmp视频流web浏览器播放”是一个基于Web的解决方案，用于在支持Flash的浏览器中播放RTMP视频流。这通常涉及到以下几个关键步骤： 1. **服务器配置**：首先，你需要一个支持RTMP的服务器，如...
RTMP视频播放web播放.rar
04-03
让我们深入探讨RTMP视频播放以及如何在Web环境中实现它。 1. **RTMP协议**: RTMP是Adobe Systems开发的，最初设计用于Flash Player进行音视频流传输。它支持实时数据传输，允许内容发布者将视频流实时推送到服务器...
web端播放rtsp/rtmp视频流demo
04-02
这个项目对于那些需要在Web端实现RTSP/RTMP视频流播放的开发者来说非常有用，它提供了一个简单且低延迟的解决方案。通过深入理解并调整这些组件，开发者可以根据具体需求进行定制，如优化性能、适应不同网络环境等。
H5网页播放rtmp实时视频流，网页直播
10-09
然而，由于H5标准并不直接支持RTMP，我们需要借助一些特定的解决方案来实现在浏览器中播放RTMP流。 其中一个常见的解决方案是使用Flash Player，但由于其安全性和性能问题，逐渐被更现代的技术所取代。目前，我们更...
Nginx-rtmp、FFmpeg实现直播效果并在web页面播放
MYNAMEL的博客
02-25 4854
本文参考链接：https://blog.csdn.net/u011424614/article/details/113420000 前情提示：本文使用的是windows10系统 主要流程讲解 1.本文选择的路线是 视频文件–>FFmpeg–>nginx–>web播放 2.FFmpeg是一个强大的视频编辑软件，基本干视频，音频的多多少少都会用到这个软件。本文中FFmpeg的作用是将视频整成视频流的形式。 3.nginx的作用主要是将FFmpeg的视频流进行发布，供web进行访问。 4.
Uncaught (in promise) DOMException 报错
热门推荐
出埃及记
04-09 4万+
最近在项目里面加入视频自动播放，有时候会报错(RT)，不能自动播放。 <video id="videoPlayer" v-show="!isNormalCamera" class="preview-video" name="media" controls="controls" autoplay="autoplay" loop > <source :src="v...
Status Code:200 OK (from disk cache)和304的区别，以及怎么禁止缓存
出埃及记
01-22 2万+
http Status 200 304 缓存
浏览器如何播放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 协议才能正常播放视频流。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值