** 注意:目前只能在360浏览器播放rtmp视频**
谷歌浏览器不支持Flash Player的问题
试过上面这个方法,目前没能实现(没解决),如果有更好的解决方法,告诉我一下
需要下载版本较低的video.js版本库,目前能播放rtmp视频的版本是5.53
npm install video.js@5.5.3 --save
播放rtmp需要flash支持需要安装
(这里我没有安装因为安装video.js 它已经包含了videojs-contrib-hls)
npm install videojs-contrib-hls
在需要用到的video 引用
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
// import "videojs-contrib-hls";// 引用这一步会报错,所以我没有引用它 (根据自己的需求来引用)
在界面引用
<video id="vid-eobo" ref="videoRef" style="width:100%;height:300px;" class="vjs-default-skin video-js" controls preload="auto" ></video>
import { ref , reactive, defineEmits, onMounted, onBeforeMount, onBeforeUnmount } from 'vue'const videoRef = ref(null);
const player = ref(null);// // 初始化video视频const beginVideo=()=> {player.value = videojs('vid-eobo', {autoplay: true,techOrder: ["flash"], //设置flash播放playbackRates: [1, 2, 3, 4, 5, 8, 10, 20],notSupportedMessage:"此视频暂无法播放,检查设备状态是否正常或请查看是否安装flash", //无法播放时显示的信息sources: [{src: 'rtmp://####/live/stream1',type: 'rtmp/flv'}]});}onMounted(() => { setTimeout(() => {beginVideo()}, 1000);});//销毁实例onBeforeUnmount(() => { player.value.dispose() });