HTML5基于flash实现播放RTMP协议视频

最新推荐文章于 2024-04-08 14:46:14 发布
置顶 VIP文章 最新推荐文章于 2024-04-08 14:46:14 发布
阅读量3.1w 收藏 28
点赞数 6
文章标签： rtmp html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44005989/article/details/90690688
版权

HTML5基于flash实现播放RTMP协议视频

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 7</title>
	<link href="css/video-js.min.css" rel="stylesheet">
	<style>
		body{background-color: #191919}
		.m{ width: 640px; height: 264px; margin-left: auto; margin-right: auto; margin-top: 100px; }
	</style>
</head>

<body>
	<div class="m">
		<video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls preload="auto" width="640" height="264" data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
		
		  </video>
		<script src="js/video.min.js"></script>
		<script src="js/videojs-flash.min.js"></script>
		  <script type="text/javascript">
		   //设置中文
		  videojs.addLanguage('zh-CN', {
			  "Play": "播放",
			  "Pause": "暂停",
			  "Current Time": "当前时间",
			  "Duration": "时长",
			  "Remaining Time": "剩余时间",
			  "Stream Type": "媒体流类型",
			  "LIVE": &#
最低0.47元/天 解锁文章
努力的阿花
关注
  • 6
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 40
    评论
HTML5 播放RTMP视频流简单示例
09-02
1、开启浏览器的flash支持。 2、不支持本地运行，建议搭建nodejs本地服务器运行测试html/js https://blog.csdn.net/u011456337/article/details/50704331
最简单的基于Flash的流媒体示例：RTMP推送和接收（ActionScript）
雷霄骅(leixiaohua1020)的专栏
02-25 6万+
本文记录一些基于Flash的流媒体处理的例子。Flash平台最常见的流媒体协议是RTMP。此前记录的一些基于C/C++的RTMP播放器/推流器，但是没有记录过基于Flash中的ActionScript的RTMP播放器/推流器。其实基于Flash的RTMP播放器/推流器才能算得上是RTMP技术中的“正规军”。RTMP本身设计出来就是用于Flash平台之间通信的，而且RTMP最大的优势——“无插件直播
【前端】rtsp 与 rtmp 视频流的播放方法
最新发布
2401_84150134的博客
04-08 618
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里领取宝典》，《前端面试题：常用算法》PDF完整版点击这里领取**[外链图片转存中…(img-DFIqKal5-1712558728586)][外链图片转存中…(img-KDLDx6iQ-1712558728587)]
h5 rtmp推荐控件_HTML5播放实现rtmp流直播
weixin_28285943的博客
12-24 4806
最近在做一个直播推流的功能，想自己写个网页进行直播尝试一下。然后网上试了各种教程都没成功，下面说下遇到的几个坑。1.首先通过obs进行推流，服务器是：rtmp://192.168.0.221/live，串流密钥：1234，然后就发现网上的教程里面都没有说道这个串流密钥要写在哪里，如果不写的话，是直播不成功的。后面试了很久发现就是直接拼接在服务器地址后面的 ，像这样，rtmp://192.168.0...
HTML 直播 RTMP流实时播放
qq_27933251的博客
09-17 3万+
HTML 直播 RTMP流实时播放 直接帖代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <div id="playercontainer...
html 播放rtmp流视频
weixin_34032621的博客
11-17 3873
2019独角兽企业重金招聘Python工程师标准>>> ...
在html5中播放RTSP/RTMP/HLS/HTTP视频流媒体的几种方案，并支持H.265
p2p音视频传输
08-17 4420
经过多年的项目实战和研发经验的积累，总结了一下对于H5视频可视化在视频播放上如何做到无插件H5展示的方法，尤其是契合安防行业的方案；
实现RTSP和RTMP视频流在页面播放
qq_42447856的博客
04-24 3988
话不多说直奔主题，今天公司让写个js实现rtsp或rtmp视频流在页面播放。因为从来没搞过这些，查找了大量的文章。然后代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>播放器</title> ...
HTML5 播放 rtmp流直播
qq_27156945的博客
06-20 3万+
最近在做一个直播推流的功能，想自己写个网页进行直播尝试一下。 然后网上试了各种教程都没成功，下面说下遇到的几个坑。 1.首先通过obs进行推流，服务器是：rtmp://192.168.0.221/live，串流密钥：1234， 然后就发现网上的教程里面都没有说道这个串流密钥要写在哪里，如果不写的话，是直播不成功的。 后面试了很久发现就是直接拼接在服务器地址后面的 ，像这样，rtmp://192....
Video.js实现在html页面播放rtmp流媒体
各类程序设计成品、文档、学习资料
10-27 2663
Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtmp流媒体Video.js实现在html页面播放rtm
HTML5播放实现rtmp流直播
01-19
最近在做一个直播推流的功能，想自己写个网页进行直播尝试一下。 然后网上试了各种教程都没成功，下面说下遇到的几个坑。 1.首先通过obs进行推流，服务器是：rtmp://192.168.0.221/live，...HTML5 直播</title>
H5网页播放rtmp实时视频流，网页直播
10-09
H5网页播放rtmp实时视频流，网页直播 解决延迟问题，心跳监测播放过程中error自重启 直接放入页面运行
python脚本在线播放实时rtmp视频流
11-28
1、python脚本在线播放实时rtmp视频流2、需要在python环境下运行，建议安装anaconda；3、建议播放湖南卫视直播rtmp视频流
vue项目中播放rtmp视频文件流的方法
10-14
主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
RTSPANE——在Flash(AIR)内播放RTSP流
西部秋虫的博客
06-09 460
rtspANE的主要功能是实现在AIR程序内播放rtsp流，目前有两个版本:Windows版和Android版。 用法： myANE = new ane(); myANE.addEventListener(“onStatus”, onStatus); var str: String = myANE.init(inputURL, outputURL, threadNum) 效果图： ...
前端Web浏览器基于Flash如何实时播放监控视频画面（一）之获取监控摄像头的RTSP流...
weixin_30933531的博客
07-10 1537
本片文章只是起到抛砖引玉的作用，能从头到尾走通就行，并不做深入研究。为了让文章通俗易懂，尽量使用白话描述。0x001: 获取现在市场上普见的摄像头都支持RTSP协议，如果你不懂什么是RTSP协议，那么你可以这么简单的认为，就是一串地址，通过这串地址你就可以拿到视频流。就犹如一串网址一样http://www.xxxx.com，通过这串网址你可以阅览网页。知道这些对你入门来说就足够了。如同下面这样：r...
最简单的基于Flash的流媒体示例：网页播放器（HTTP，RTMP，HLS）
热门推荐
雷霄骅(leixiaohua1020)的专栏
02-25 21万+
本文继续上一篇文章，记录一些基于Flash的流媒体处理的例子。本文记录一些基于Flash技术的网页播放器。基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是“免插件安装”了，这一点可以很大的提高用户的体验质量。早些时候网络视频（尤其是直播）一般都使用ActiveX控件作为视频播放器，而这些控件并不普及，所以终端用户必须下载相关的插件才能收看节目，因而对很多不熟悉电脑的用户造成了很大的
videojs+hls+rtmp流媒体播放
aiyizou6070的博客
11-19 1705
前言：刚接触前端，小白一个，如有出错，请指正，谢谢！ 注：视频格式可以分为适合本地播放的本地影像视频和适合在网络中播放的网络流媒体影像视频两大类。 一、互联网网络流媒体简介 　　HTTP stream是各家自己定义的http流，应用于国内点播视频网站。 　　HLS是苹果公司实现的基于 HTTP 的流媒体传输协议，全称 HTTP Live Streaming，可支持流媒体的直播和点...
HTML页面 加载播放RTMP协议流和HLS协议流直播视频
默默不代表沉默
11-08 6499
主要内容让rtmp或hls的协议流直播视频能在html页面正常显示（这里也是综合参考了网上其余的资料，最终放出下面这些实测可用的方案）。 首先是HLS协议流， 这种是播放m3u8格式的视频。 解决方案： 新建html页面, testHls.html (里面的视频地址我已经改了，请替换成自己的地址)： <!DOCTYPE html> <html la...
h5播放rtmp视频流 demo
06-07
这里是一个简单的 H5 播放 RTMP 视频流的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>播放 RTMP 视频流</title> <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script> </head> <body> <video id="myVideo" autoplay></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('myVideo'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'your_rtmp_video_stream_url' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> </body> </html> ``` 其中，你需要将 `your_rtmp_video_stream_url` 替换为你的 RTMP 视频流地址。此外，你需要在页面中引入 flv.js 库，该库提供了对 FLV 视频格式的支持，可以让 H5 播放 RTMP 视频流。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 40
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值