vue3 video 播放rtmp视频?(360浏览器支持)

** 注意:目前只能在360浏览器播放rtmp视频**
谷歌浏览器不支持Flash Player的问题
试过上面这个方法,目前没能实现(没解决),如果有更好的解决方法,告诉我一下

需要下载版本较低的video.js版本库,目前能播放rtmp视频的版本是5.53

bash 复制代码
 npm install video.js@5.5.3 --save

播放rtmp需要flash支持需要安装

(这里我没有安装因为安装video.js 它已经包含了videojs-contrib-hls)

bash 复制代码
npm install videojs-contrib-hls

在需要用到的video 引用

javascript 复制代码
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
// import "videojs-contrib-hls";// 引用这一步会报错,所以我没有引用它 (根据自己的需求来引用)

在界面引用

html 复制代码
<video id="vid-eobo" ref="videoRef" style="width:100%;height:300px;"  class="vjs-default-skin video-js"  controls preload="auto"  >
 </video>
javascript 复制代码
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() });
相关推荐
正在走向自律1 小时前
第二章-AIGC入门-开启AIGC音频探索之旅:从入门到实践(6/36)
人工智能·aigc·音视频·语音识别·ai音乐·ai 音频·智能语音助手
美狐美颜sdk9 小时前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
melonbo12 小时前
使用FFmpeg将H.264码流封装为MP4
ffmpeg·音视频·h.264
aqi0014 小时前
FFmpeg开发笔记(七十七)Android的开源音视频剪辑框架RxFFmpeg
android·ffmpeg·音视频·流媒体
慢行的骑兵16 小时前
Android音视频探索之旅 | CMake基础语法 && 创建支持Ffmpeg的Android项目
ffmpeg·音视频
Just_Paranoid16 小时前
华为云Flexus+DeepSeek征文|基于Dify构建音视频内容转录工作流
华为云·音视频·dify·maas·deepseek·flexusx
go546315846517 小时前
修改Spatial-MLLM项目,使其专注于无人机航拍视频的空间理解
人工智能·算法·机器学习·架构·音视频·无人机
叹一曲当时只道是寻常20 小时前
Softhub软件下载站实战开发(十):实现图片视频上传下载接口
golang·go·音视频
音视频牛哥1 天前
计算机视觉的新浪潮:扩散模型(Diffusion Models)技术剖析与应用前景
人工智能·计算机视觉·ai·音视频·实时音视频·扩散模型
电子科技圈1 天前
SmartDV推出先进的H.264和H.265视频编码器和解码器IP
音视频·h.265·h.264