前端播放rtmp协议的视频流文件

最新推荐文章于 2025-11-03 13:42:17 发布

原创

最新推荐文章于 2025-11-03 13:42:17 发布 · 9.8k 阅读

37 ·

CC 4.0 BY-SA版权

本文分享了在大屏可视化项目中使用video.js播放RTMP协议视频流的实践经验，包括解决兼容性和自动播放问题，以及如何调整配置避免跨域限制。

该文章已生成可运行项目，

前端播放rtmp协议的视频流文件

最近公司的项目中需要在大屏可视化的页面中的一个位置是视频监控的，需求大概是这样的：

大屏右下角布局中有六个div，每个可以实时播放监控视频
点击某个视频全屏放大，
自动播放

先用图片占个位，大概就是这样，很常见的需求，开发起来还是遇到了一些问题，这里分享一下。

我们都知道H5的video标签一共支持三种格式的视频文件：Ogg, MPEG4, WebM,这三种格式对于浏览器的兼容性也不相同。但是video标签肯定是不能直接播放rtmp协议的文件，现在有两种方法：一种就是自己写一套视频处理，那肯定不现实啊，第二种就是用专门的视频处理插件，当然是选用第二种了，省事又快速了，经过查资料最终选用了video.js这个插件，开始开发了！

第一步按照官网的文档下载插件，先写个小demo测试一下

<!DOCTYPE HTML>
<html>  
  <head>  
  <title>视频直播</title>  
  <meta charset="utf-8">  
  <link href="css/video-js.min.css" rel="stylesheet">
</head>  
<body>  
  <h1>直播测试</h1>  
 <video id="my-video" class="video-js" controls preload="auto" width="640px" height="480px"   poster="" data-setup="{}"&

本文章已经生成可运行项目