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.mzph.cn/pingmian/65401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

yarn list --pattern vuex-module-decorators

dgqdgqdeMac-mini spid-admin % yarn list --pattern vuex-module-decorators yarn list v1.22.22 └─ vuex-module-decorators0.16.1 ✨ Done in 0.24s.好的&#xff0c;这段代码是一个典型的 Vuex 模块定义&#xff0c;使用了 vuex-module-decorators 库。这个库为 Vuex 提…

用Python写炸金花游戏

文章目录 **代码分解与讲解**1. **扑克牌的生成与洗牌**2. **给玩家发牌**3. **打印玩家的手牌**4. **定义牌的优先级**5. **判断牌型**6. **确定牌型优先级**7. **比较两手牌的大小**8. **打印结果** 完整代码 以下游戏规则&#xff1a; 那么我们要实现的功能&#xff0c;就是…

day19-Linux软件包

科普&#xff0c;什么是代码文件。 电脑程序Program&#xff0c;就是某一个编程语言编写的一个代码文件&#xff0c;里面包含了该语言特有的指令&#xff0c;以及各种字符、符号。 linux自带的network管理脚本&#xff0c;shell脚本 什么是软件程序。 软件程序&#xff0c;就…

浅谈下Spring MVC的执行流程

什么是Spring MVC Spring MVC是一个基于Java的Web框架&#xff0c;用于构建Web应用程序。 它是Spring Framework的一部分&#xff0c;它提供了模型-视图-控制器&#xff08;MVC&#xff09;架构。 支持RESTful风格的URL请求&#xff0c;易于与其他视图技术集成&#xff0c;如…

图像处理-Ch4-频率域处理

Ch4 频率域处理(Image Enhancement in Frequency Domain) FT &#xff1a;将信号表示成各种频率的正弦信号的线性组合。 频谱&#xff1a; ∣ F ( u , v ) ∣ [ R 2 ( u , v ) I 2 ( u , v ) ] 1 2 |F(u, v)| \left[ R^2(u, v) I^2(u, v) \right]^{\frac{1}{2}} ∣F(u,v)…

从代码中学习:评估模型的性能

从代码中学习&#xff1a;评估模型的性能 在这篇博客中&#xff0c;我们将逐步解析一段Python代码&#xff0c;并解释每一行的作用。这段代码主要用于加载数据集、加载预训练模型、进行推理并评估模型的性能。我们将以简单易懂的方式解释每一部分&#xff0c;确保即使是小学生…

C++ 内存管理:原理、技巧与实战

目录 第一章:C++ 内存管理基础 1.1 C++ 内存布局剖析 1.2 内存分配与释放:核心机制详解 1.2.1 new/delete 操作符 1.2.2 malloc/free 函数 第二章:智能指针 —— 内存管理利器 2.1 智能指针概览 2.2 常用智能指针类型 2.2.1 unique_ptr 2.2.2 shared_ptr 2.2.3 we…

Vue BPMN Modeler流程图

1、参考地址 git clone https://github.com/evanyangg/vue-bpmn-modeler.git 2、安装bpmn.js npm install bpmn-js --save 3、使用bpmn.js <template><div class"containers"><div class"canvas" ref"canvas"></div&g…

将现有Web 网页封装为macOS应用

文章目录 方式一&#xff1a;Unite for macOS方式二&#xff1a;Web2Desk方式三&#xff1a;Nativefier方式四&#xff1a;Flutter Flutter WebView Plugin总结 方式一&#xff1a;Unite for macOS Unite 是一款专为 macOS 设计的工具&#xff0c;可以将任意 Web 页面快速封装…

element下拉多选项回显

需求&#xff1a;在新增页面下拉选项多选之后&#xff0c;在编辑页面要回显出来&#xff08;新增页跟编辑页共用一个页面&#xff09; <el-form-item label"锁类型" prop"selectListvalue"><el-selectv-model"selectListvalue"multipl…

2024年前端工程师总结

前言 大家好&#xff0c;我是小荣&#xff0c;一名正在走向全栈接单的前端开发工程师。 到年底了&#xff0c;如往年一样给自己做个年终总结。总结是一件好事&#xff0c;希望大家也做起来。 我将会从以下几个点展开讲讲&#xff1a; 2024年的程序员经历2024年的个人发展与行…

TipTap编辑器:现代化的富文本编辑解决方案

简介 TipTap是一个基于 ProseMirror 的现代化富文本编辑器框架。它具有模块化、可扩展和响应式的特点&#xff0c;特别适合用于Vue、React等现代前端框架中。 主要特点 1. 模块化设计 import { Editor } from tiptap/core import StarterKit from tiptap/starter-kitconst …

STM32完全学习——FATFS0.15移植SD卡

一、下载FATFS源码 大家都知道使用CubMAX可以很快的将&#xff0c;FATFS文件管理系统移植到单片机上&#xff0c;但是别的芯片没有这么好用的工具&#xff0c;就需要自己从官网下载源码进行移植。我们首先解决SD卡的驱动问题&#xff0c;然后再移植FATFS文件管理系统。 二、SD…

5、栈应用-表达式求值

本章内容使用上述栈结构函数&#xff0c;来完成表达式求值操作。 表达式例如&#xff1a;3*(7-2) 或者 (0-12)*((5-3)*32)/(22) 。 1、实现思路 a、建立OPTR&#xff08;运算符&#xff09;和OPND&#xff08;数字&#xff09;两个栈&#xff0c;后输入字符串以结束 b、自左向…

【递归与回溯深度解析:经典题解精讲(下篇)】—— Leetcode

文章目录 有效的数独解数独单词搜索黄金矿工不同的路径||| 有效的数独 递归解法思路 将每个数独的格子视为一个任务&#xff0c;依次检查每个格子是否合法。 如果当前格子中的数字违反了数独规则&#xff08;在行、列或 33 小方块中重复&#xff09;&#xff0c;直接返回 Fals…

Llama 3 预训练(二)

目录 3. 预训练 3.1 预训练数据 3.1.1 网络数据筛选 PII 和安全过滤 文本提取与清理 去重&#xff08;De-duplication&#xff09; 启发式过滤&#xff08;Heuristic Filtering&#xff09; 基于模型的质量过滤 代码和数学推理数据处理 多语言数据处理 3.1.2 确定数…

Mono里运行C#脚本8—mono_image_storage_open打开EXE文件

Mono里运行C#脚本8—mono_image_storage_open打开EXE文件 前面分析哈希表的实现,以及文件打开的底层函数,还有保存到HASH表里的数据结构。 static MonoImageStorage * mono_image_storage_open (const char *fname) { char *key = NULL; key = mono_path_resolve_symlinks…

前端项目 node_modules依赖报错解决记录

1.首先尝试解决思路 npm报错就切换yarn &#xff0c; yarn报错就先切换npm删除 node_modules 跟 package-lock.json文件重新下载依 2. 报错信息&#xff1a; Module build failed: Error: Missing binding D:\vue-element-admin\node_modules\node-sass\vendor\win32-x64-8…

双指针——查找总价格为目标值的两个商品

一.题目描述 LCR 179. 查找总价格为目标值的两个商品 - 力扣&#xff08;LeetCode&#xff09; 二.题目解析 这个题目非常简单&#xff0c;其实就是判断有没有两个数加起来等于target。 三.算法解析 1.暴力解法 暴力解法的话我们可以枚举出所有的情况&#xff0c;然后判…

sqlserver镜像设置

本案例是双机热备&#xff0c;只设置主体服务器&#xff08;主&#xff09;和镜像服务器&#xff08;从&#xff09;&#xff0c;不设置见证服务器 设置镜像前先检查是否启用了 主从服务器数据库的 TCP/IP协议 和 RemoteDAC &#xff08;1&#xff09;打开SQL Server配置管理器…