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

用Multisim复刻经典:手把手教你搭建一个带分数显示的四人抢答器(附仿真文件)

用Multisim复刻经典&#xff1a;手把手教你搭建一个带分数显示的四人抢答器&#xff08;附仿真文件&#xff09; 在电子工程的学习和实践中&#xff0c;没有什么比亲手搭建一个完整的数字电路系统更能让人兴奋的了。尤其是对于那些对经典74系列芯片情有独钟的工程师和爱好者来说…...

DFRobot URM07超声波传感器UART通信与温度补偿详解

1. DFRobot URM07超声波测距传感器技术深度解析1.1 产品定位与工程价值DFRobot URM07&#xff08;SKU: SEN0153&#xff09;是一款面向嵌入式系统设计的工业级超声波距离传感器模块&#xff0c;其核心价值在于将高精度测距、环境温度补偿、超低功耗与UART标准化接口四者深度融合…...

Qwen3-14B开源模型实战:跨境电商多平台产品文案批量生成

Qwen3-14B开源模型实战&#xff1a;跨境电商多平台产品文案批量生成 1. 跨境电商文案生成的痛点与解决方案 跨境电商运营面临的最大挑战之一&#xff0c;就是需要为同一款产品在不同平台&#xff08;亚马逊、eBay、速卖通等&#xff09;生成符合各自规范的优质文案。传统人工…...

YOLO12快速部署指南:Gradio界面已配好,启动就能用

YOLO12快速部署指南&#xff1a;Gradio界面已配好&#xff0c;启动就能用 1. 为什么选择YOLO12镜像 YOLO12作为2025年最新发布的目标检测模型&#xff0c;带来了革命性的注意力为中心架构。这个预配置好的镜像让您无需任何复杂操作&#xff0c;就能立即体验最先进的目标检测技…...

推荐算法闲谈:如何在不同业务场景下理解和拆解核心指标

巧解决的是能不能学好&#xff0c;而指标分析解决的是这次改动是否真正创造了业务价值&#xff0c;以及为什么。一个非常常见、但又极易被忽视的事实是&#xff1a;推荐系统并不存在一套放之四海而皆准的核心业务指标。不同产品形态、不同交互方式、不同公司发展阶段&#xff0…...

Scratch飞翔小鸟游戏制作教程:从零开始打造你的第一个像素风小游戏

Scratch飞翔小鸟游戏制作教程&#xff1a;从零开始打造你的第一个像素风小游戏 当孩子们第一次接触编程时&#xff0c;往往会被复杂的代码和抽象的概念吓退。而Scratch就像一扇通往创意世界的大门&#xff0c;用积木式的编程方式让游戏开发变得触手可及。今天&#xff0c;我们将…...

从零构建uWSGI-Nginx-Flask-Docker镜像的5个核心步骤

从零构建uWSGI-Nginx-Flask-Docker镜像的5个核心步骤 【免费下载链接】uwsgi-nginx-flask-docker Docker image with uWSGI and Nginx for Flask applications in Python running in a single container. Optionally with Alpine Linux. 项目地址: https://gitcode.com/gh_mi…...

别再用Delay了!用GD32的TIMER5实现精准1ms定时,让你的嵌入式程序更高效

告别阻塞式延时&#xff1a;用GD32 TIMER5构建高效嵌入式系统心跳 在嵌入式开发中&#xff0c;时间管理如同系统的心跳&#xff0c;决定了整个应用的响应速度和执行效率。许多开发者习惯使用delay_ms()这类阻塞式延时函数&#xff0c;却不知这会让CPU陷入无意义的等待状态&…...

Qwen3-14B GPU算力优化实践:显存占用降低28%的FlashAttention-2配置

Qwen3-14B GPU算力优化实践&#xff1a;显存占用降低28%的FlashAttention-2配置 1. 开箱即用的私有部署方案 对于想要快速部署Qwen3-14B大模型的企业和个人开发者来说&#xff0c;这个经过优化的私有部署镜像提供了完美的解决方案。它基于RTX 4090D 24GB显存显卡和CUDA 12.4环…...

2026年4月怎么搭建OpenClaw?腾讯云保姆级5分钟安装及百炼APIKey配置方法

2026年4月怎么搭建OpenClaw&#xff1f;腾讯云保姆级5分钟安装及百炼APIKey配置方法。OpenClaw&#xff08;原Clawdbot&#xff09;作为2026年主流的AI自动化助理平台&#xff0c;可通过阿里云轻量服务器实现724小时稳定运行&#xff0c;并快速接入钉钉&#xff0c;让AI在企业群…...