video.js播放rtmp视频流

本文会详细解释如何修复：video.js播放rtmp视频监控只显示在左上角100*100的方块中的问题。

• 网络上也能轻易搜到这个问题，但是对问题的处理讲的不是很明确，可能是我太菜不能理解，不知道怎么替换文件，琢磨了很久才找到具体的解决方法

1. 首先安装video.js 5.6.0版本，该版本支持flash播放

1. 导入

import videojs from "video.js";
import "video.js/dist/video-js.css";
           

1. 页面上使用，data-setup一定要有

<video 
	id="player" 
	class="video-js vjs-default-skin"
	data-setup="{}"
></video>
           

1. 初始化
   • [email protected]6.0版本默认swf文件是5.0.1
   • 修改flash.swf的地址，5.4.2版本的文件会修复rtmp视频只显示在左上角100 * 100方块中的问题。
   • 问题详情见Github问题原文

mounted() {
	this.videoPlayer = videojs("player" , {
		preload: "auto",// 预加载
		autoplay: true,// 自动播放
		flash: {
			swf: "//vjs.zencdn.net/swf/5.4.2/video-js.swf"
		},
		notSupportedMessage: "你的浏览器不支持Flash播放"
	});
}
           

1. 播放地址赋值，湖南卫视rtmp地址（rtmp://58.200.131.2:1935/livetv/hunantv）

this.videoPlayer.src({
	type: "rtmp/flv",
	src: "rtmp://58.200.131.2:1935/livetv/hunantv"
});
           

1. 其他方法

//暂停播放
this.videoPlayer.pause();
//重置播放地址，切换地址之前使用可以有loading动画
this.videoPlayer.reset();