当前位置: 首页 > 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 中没有考…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...