当前位置: 首页 > 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() });

相关文章:

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

** 注意&#xff1a;目前只能在360浏览器播放rtmp视频** 谷歌浏览器不支持Flash Player的问题 试过上面这个方法&#xff0c;目前没能实现&#xff08;没解决&#xff09;&#xff0c;如果有更好的解决方法&#xff0c;告诉我一下 需要下载版本较低的video.js版本库&#xff0…...

RK356x bsp 7 - PCF8563 RTC调试记录

文章目录 1、环境介绍2、目标3、PCF85634、dts配置5、内核配置6、测试验证 1、环境介绍 硬件&#xff1a;飞凌ok3568-c开发板 软件&#xff1a;原厂rk356x sdk 2、目标 开发板断电后仍正常计时。 3、PCF8563 PCF8563 是由 NXP Semiconductors 公司生产的低功耗 CMOS 实时…...

定义Shape:打造属于你的独特图形

自定义Shape:打造属于你的独特图形 在Android开发中,自定义图形绘制是一个非常重要的技能,尤其是在需要实现复杂UI或特定设计需求时。Android提供了android.graphics.drawable.shapes包,其中包含了一些基本的形状类,如RectShape、OvalShape等。然而,有时这些基本形状无法…...

JavaWeb(一) | 基本概念(web服务器、Tomcat、HTTP、Maven)、Servlet 简介

1. 基本概念 1.1、前言 web开发&#xff1a; web&#xff0c;网页的意思&#xff0c;www.baidu.com静态 web html,css提供给所有人看的数据始终不会发生变化&#xff01; 动态 web 淘宝&#xff0c;几乎是所有的网站&#xff1b;提供给所有人看的数据始终会发生变化&#xf…...

python学opencv|读取图像(二十一)使用cv2.circle()绘制圆形进阶

【1】引言 前序已经掌握了使用cv2.circle()绘制圆形的基本操作&#xff0c;相关链接为&#xff1a; python学opencv|读取图像&#xff08;二十&#xff09;使用cv2.circle()绘制圆形-CSDN博客 由于圆形本身绘制起来比较简单&#xff0c;因此可以自由操作的空间也就大&#x…...

CLIP:连接文本与图像, 从自然语言监督中学习可迁移的视觉模型

CLIP&#xff1a;连接文本与图像&#xff0c; 从自然语言监督中学习可迁移的视觉模型 flyfish Learning Transferable Visual Models From Natural Language Supervision https://github.com/OpenAI/CLIP 摘要 CLIP Contrastive Language-Image Pre-Training Contrastive&…...

Linux 硬盘扩容 分区 挂载

Linux 硬盘扩容 分区 & 挂载 1. 添加分区 1.1. 查看新添加的硬盘 fdisk -l假设当前未挂载的盘符是/dev/sdb&#xff0c;后文中所有操作都按挂载/dev/sdb 操作 1.2. 分区管理 小硬盘 fdisk /dev/sdb大硬盘&#xff08;2TB以上&#xff09; gdisk /dev/sdb1.3. 编辑分…...

基于 Slf4j 和 AOP 的自动化方法执行时间日志记录方案

前言 其实这个需求很简单&#xff0c;但是这个需求又是项目中必不可少的&#xff0c;尤其对于性能调优这块&#xff0c;但是使用哪种方式更加方便呢&#xff0c;这就是本篇博文需要讨论的重点 系统时间 可以通过 System.currentTimeMillis() 或 System.nanoTime() 来实现。 …...

关于 K8s 的一些基础概念整理-补充【k8s系列之二】

〇、前言 本文继续整理下 K8s 的一些基础概念&#xff0c;作为前一篇概念汇总的补充。 前一篇博文链接&#xff1a;关于 K8s 的一些基础概念整理【k8s系列之一】_集群 master节点 控制节点 宿主机-CSDN博客 一、详情 1.1 Label Label 在 k8s 中是一个非常核心的概念&#xf…...

FPGA的DMA应用——pcileech

硬件通过pcie总线&#xff0c;访存本机的内存&#xff0c;并进行修改&#xff0c;可以进行很多操作。 学习视频&#xff1a;乱讲DMA及TLP 1-pcileech项目简介和自定义模块介绍_哔哩哔哩_bilibili vivado2024.1的下载文章链接和地址&#xff1a;AMD-Xilinx Vivado™ 2024.1 现…...

信息安全管理:运行管理checklist

运行管理checklist内容包括日常操作与维护管理、变更管理、备份与故障恢复、应急与业务连续性管理等内容。 一、日常操作与维护管理 ▼▼制度与流程 是否建立日常运行操作制度与流程&#xff1f;包括网络、主机、应用等方面的操作制度与流程&#xff1f; 是否明确相关部门和人…...

Linux系统之stat命令的基本使用

Linux系统之stat命令的基本使用 一、stat命令 介绍二、stat命令帮助2.1 查询帮助信息2.2 stat命令的帮助解释 三、stat命令的基本使用3.1 查询文件信息3.2 查看文件系统状态3.3 使用格式化输出3.4 以简洁形式打印信息 四、注意事项 一、stat命令 介绍 stat 命令用于显示文件或文…...

云手机+Facebook:让科技与娱乐完美结合

移动互联网时代&#xff0c;Facebook作为全球最大的社交媒体平台之一&#xff0c;早已成为企业、品牌和组织竞相角逐的营销阵地。而云手机的出现&#xff0c;则为Facebook营销注入了新的活力&#xff0c;其独特的优势让营销活动更加高效、精准且灵活。本文将深入探讨云手机在Fa…...

为什么要在PHY芯片和RJ45网口中间加网络变压器

在PHY芯片和RJ45网口之间加入网络变压器是出于以下几个重要的考虑&#xff1a; 1. 电气隔离&#xff1a;网络变压器提供了电气隔离功能&#xff0c;有效阻断了PHY芯片与RJ45之间直流分量的直接连接。这样可以防止可能的电源冲突&#xff0c;降低系统故障的风险&#xff0c;并保…...

LeetCode 19:删除链表的倒数第N 个结点

题目&#xff1a; 地址&#xff1a;https://leetcode.cn/problems/remove-nth-node-from-end-of-list/ 方法一&#xff1a; 方法二&#xff1a; 代码&#xff1a; package com.zy.leetcode.LeetCode_19;/*** Author: zy* Date: 2024-12-25-13:01* Description: 删除链表…...

RT-DETR融合[IJCV2024]LSKNet中的LSKBlock模块

RT-DETR使用教程&#xff1a; RT-DETR使用教程 RT-DETR改进汇总贴&#xff1a;RT-DETR更新汇总贴 《Large Selective Kernel Network for Remote Sensing Object Detection》 一、 模块介绍 论文链接&#xff1a;https://arxiv.org/pdf/2303.09030 代码链接&#xff1a;https:…...

C/C++ 数据结构与算法【树和森林】 树和森林 详细解析【日常学习,考研必备】带图+详细代码

一、树的存储结构 1&#xff09;双亲表示法实现&#xff1a; 定义结构数组存放树的结点&#xff0c;每个结点含两个域: 数据域&#xff1a;存放结点本身信息。双亲域&#xff1a;指示本结点的双亲结点在数组中的位置。 特点&#xff1a;找双亲简单&#xff0c;找孩子难 C语…...

新浪微博大数据面试题及参考答案(数据开发和数据分析)

介绍一下你所掌握的计算机网络和操作系统相关知识 计算机网络:计算机网络是将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统。我掌握了网络协议…...

OpenHarmony怎么修改DPI密度值?RK3566鸿蒙开发板演示

本文介绍在开源鸿蒙OpenHarmony系统下&#xff0c;修改DPI密度值的方法&#xff0c;触觉智能Purple Pi OH鸿蒙开发板演示&#xff0c;搭载了瑞芯微RK3566四核处理器&#xff0c;Laval鸿蒙社区推荐开发板&#xff0c;已适配全新开源鸿蒙OpenHarmony5.0 Release系统&#xff0c;适…...

SAP GUI Scripting - 如何判断组件是否存在

总体来说&#xff0c;SAP Scripting 与 BDC 类似&#xff0c;因为是屏幕录制&#xff0c;就可能碰到不同的情况&#xff0c;比如每个录入的数据不同&#xff0c;可能出现一个对话框&#xff0c;或者出现一个状态栏消息。这种任何有变化的情况&#xff0c;在 Scripting 中没有考…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

Windows 下端口占用排查与释放全攻略

Windows 下端口占用排查与释放全攻略​ 在开发和运维过程中&#xff0c;经常会遇到端口被占用的问题&#xff08;如 8080、3306 等常用端口&#xff09;。本文将详细介绍如何通过命令行和图形化界面快速定位并释放被占用的端口&#xff0c;帮助你高效解决此类问题。​ 一、准…...

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

如何把工业通信协议转换成http websocket

1.现状 工业通信协议多数工作在边缘设备上&#xff0c;比如&#xff1a;PLC、IOT盒子等。上层业务系统需要根据不同的工业协议做对应开发&#xff0c;当设备上用的是modbus从站时&#xff0c;采集设备数据需要开发modbus主站&#xff1b;当设备上用的是西门子PN协议时&#xf…...

Appium下载安装配置保姆教程(图文详解)

目录 一、Appium软件介绍 1.特点 2.工作原理 3.应用场景 二、环境准备 安装 Node.js 安装 Appium 安装 JDK 安装 Android SDK 安装Python及依赖包 三、安装教程 1.Node.js安装 1.1.下载Node 1.2.安装程序 1.3.配置npm仓储和缓存 1.4. 配置环境 1.5.测试Node.j…...