当前位置: 首页 > news >正文

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

** 注意:目前只能在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() });
http://www.lryc.cn/news/510872.html

相关文章:

  • RK356x bsp 7 - PCF8563 RTC调试记录
  • 定义Shape:打造属于你的独特图形
  • JavaWeb(一) | 基本概念(web服务器、Tomcat、HTTP、Maven)、Servlet 简介
  • python学opencv|读取图像(二十一)使用cv2.circle()绘制圆形进阶
  • CLIP:连接文本与图像, 从自然语言监督中学习可迁移的视觉模型
  • Linux 硬盘扩容 分区 挂载
  • 基于 Slf4j 和 AOP 的自动化方法执行时间日志记录方案
  • 关于 K8s 的一些基础概念整理-补充【k8s系列之二】
  • FPGA的DMA应用——pcileech
  • 信息安全管理:运行管理checklist
  • Linux系统之stat命令的基本使用
  • 云手机+Facebook:让科技与娱乐完美结合
  • 为什么要在PHY芯片和RJ45网口中间加网络变压器
  • LeetCode 19:删除链表的倒数第N 个结点
  • RT-DETR融合[IJCV2024]LSKNet中的LSKBlock模块
  • C/C++ 数据结构与算法【树和森林】 树和森林 详细解析【日常学习,考研必备】带图+详细代码
  • 新浪微博大数据面试题及参考答案(数据开发和数据分析)
  • OpenHarmony怎么修改DPI密度值?RK3566鸿蒙开发板演示
  • SAP GUI Scripting - 如何判断组件是否存在
  • Go 计算Utf8字符串的长度 不要超过mysql字段的最大长度
  • llamafactory报错:双卡4090GPU,训练qwen2.5:7B、14B时报错GPU显存不足(out of memory),轻松搞定~~~
  • 全局webSocket 单个页面进行监听并移除单页面监听
  • JVM调优实践篇
  • 【JavaEE】Spring Web MVC
  • VSCode 插件开发实战(七):插件支持了哪些事件,以及如何利用和监听这些事件
  • 指针详解之 多层嵌套的关系
  • Animated Drawings:让纸上的角色动起来
  • 技术与教育的结合:高校听课评价系统的设计与实施
  • web移动端项目常用解决方案
  • LabVIEW软件项目设计方案如何制定