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

vue3使用西瓜播放器播放flv、hls、mp4视频

vue3使用西瓜播放器播放flv、hls、mp4视频

安装相关的插件

npm install xgplayer

npminstall xgplayer-flv

npm install xgplayer-hls

npm install  xgplayer-mp4

组件封装

<template><div :id="`${playerId}`" />
</template>
<script setup lang="ts">
import Player from 'xgplayer'
import FlvPlugin from 'xgplayer-flv'
import HlsPlugin from 'xgplayer-hls'
import Mp4Plugin from 'xgplayer-mp4'
import 'xgplayer/dist/index.min.css'
import { ref, watch, onMounted, onUnmounted } from 'vue'interface propsType {playerId?: stringwidth?: numberheight?: numberurl: stringplugin?: 'flv' | 'hls' | 'mp4'fitVideoSize?: 'fixed' | 'fixWidth' | 'fixHeight' | undefinedcontrols?: boolean
}const props = withDefaults(defineProps<propsType>(), {playerId: 'playerContainer',width: 640,height: 320,url: '',plugin: 'hls',fitVideoSize: 'fixWidth',controls: true
})
const player = ref<any>(null)
const clientWidth = ref<number>(1920)
const clientHeight = ref<number>(1080)onMounted(() => {init()clientWidth.value = document.body.clientWidthclientHeight.value = document.body.clientHeightwindow.addEventListener('resize',() => {clientWidth.value = document.body.clientWidthclientHeight.value = document.body.clientHeightinit()},false)
})
watch(() => props.url,() => {init()},{ deep: true }
)
const getPlugins = () => {let plugins = [Mp4Plugin]switch (props.plugin) {case 'hls':// @ts-expect-error version报错plugins = [HlsPlugin]breakcase 'flv':// @ts-expect-error version报错plugins = [FlvPlugin]breakdefault:plugins = [Mp4Plugin]break}return plugins
}
const init = async () => {player.value = new Player({id: props.playerId,isLive: true,autoplayMuted: true,autoplay: true,plugins: await getPlugins(),url: props.url,fitVideoSize: props.fitVideoSize,height: props.height * (clientHeight.value / 1080),width: props.width * (clientWidth.value / 1920),lang: 'zh-cn',controls: props.controls})
}
/*** 销毁播放器*/
onUnmounted(() => {player.value.destroy()
})
</script>

相关文章:

vue3使用西瓜播放器播放flv、hls、mp4视频

vue3使用西瓜播放器播放flv、hls、mp4视频 安装相关的插件 npm install xgplayer npminstall xgplayer-flv npm install xgplayer-hls npm install xgplayer-mp4 组件封装 <template><div :id"${playerId}" /> </template> <script setup la…...

【Promise12数据集】Promise12数据集介绍和预处理

【Segment Anything Model】做分割的专栏链接&#xff0c;欢迎来学习。 【博主微信】cvxiayixiao 本专栏为公开数据集的介绍和预处理&#xff0c;持续更新中。 要是只想把Promise12数据集的raw形式分割为png形式&#xff0c;快速导航&#xff0c;直接看2&#xff0c;4标题即可 …...

Qt设置整体背景颜色

this->setStyleSheet("border:none;background-color:white");...

Stream流常见操作

.stream() 常用方法 .forEach&#xff08;&#xff09; 该方法接收一个 Consumer 接口函数&#xff0c;会将每一个流元素交给该函数进行处理 .filter()&#xff1a;过滤 该接口接收一个 Predicate 函数式接口参数&#xff08;可以是一个Lambda或方法引用&#xff09;作为筛…...

INFINI Labs 产品更新 | 发布 Easysearch Java 客户端,Console 支持 SQL 查询等功能

近年来&#xff0c;日志管理平台越来越流行。使用日志管理平台可以实时地、统一地、方便地管理和查看日志&#xff0c;挖掘日志数据价值&#xff0c;驱动运维、运营&#xff0c;提升服务管理效率。 方案架构 Beats 是轻量级采集器&#xff0c;包括 Filebeat、Metricbeat 等。E…...

前端调试只会console.log()?

前言 相信大家在日常开发中调试代码是必不可少的步骤&#xff0c;毕竟谁也不能保证代码不出问题&#xff0c;总得debug一下&#xff0c;输出信息看看数据有没有问题。是不是习惯性console.log(‘XXX’)或者debugger呢。而JavaScript中的console对象提供了丰富的方法用于更灵活…...

CentOS Linux release 7.9.2009 (Core)中安装配置Tomcat

一、安装JDK 部分内容可以参考我这篇文章&#xff1a;Windows11与CentOS7下配置与检测JDK与Maven环境变量 中的 2.2 安装jdk-8u371-linux-x64.tar.gz和配置环境变量/etc/profile //1、安装redhat-lsb yum install -y redhat-lsb//2、查看系统版本信息 lsb_release -a //3、查…...

移动机器人路径规划(四)--- 考虑机器人模型下的运动规划KINODYNAMIC PATHFINDING

目录 1 动力学概念简介 2 State Lattice Planning 3 Boundary Value Problem 4 混合A*算法 Hybrid A* 5 Kinodynamic RRT* 1 动力学概念简介 一种生成机器人的运动同时受限制于运动学的约束&#xff08;避障&#xff09;以及动力学的约束&#xff08;在速度加速度力的约束…...

服务器数据恢复—VMware虚拟化下误操作导致服务器崩溃的数据恢复案例

服务器故障&分析&#xff1a; VMware虚拟化&#xff0c;vmfs文件系统&#xff0c;共3块磁盘。工作人员误操作将VMware虚拟化重装系统&#xff0c;服务器崩溃。 正常情况下&#xff0c;重装系统会导致文件系统元文件被覆盖。要恢复数据须找到重装系统前的文件系统残留信息并…...

微服务实战系列之Gateway

前言 人类世界自工业革命以来&#xff0c;无论从金融、货币、制度&#xff0c;还是科技、资源、社会各个方面&#xff0c;都发生了翻天覆地的变化。物质极大丰富&#xff0c;从而也推动了科技的极速发展。当计算机问世也仅仅不到80年&#xff0c;而如今我们的生活处处有它的影子…...

GZ038 物联网应用开发赛题第10套

2023年全国职业院校技能大赛 高职组 物联网应用开发 任 务 书 &#xff08;第10套卷&#xff09; 工位号&#xff1a;______________ 第一部分 竞赛须知 一、竞赛要求 1、正确使用工具&#xff0c;操作安全规范&#xff1b; 2、竞赛过程中如有异议&#xff0c;可向现场考…...

重生之我是一名程序员 35

哈喽啊大家晚上好&#xff01;今天给大家带来的知识很简单啊&#xff0c;所以今天呢给大家带来的是C语言中的另一个库函数——strlen。 首先&#xff0c;让我先给大家介绍一下它&#xff0c;strlen函数是C语言中的一个字符串处理函数&#xff0c;它用于计算一个字符串的长度&a…...

计算机毕业设计选题推荐-点餐微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

分享禁止Win10更新的两种方法

深恶痛绝 Windows更新简直就是毒瘤&#xff0c;总是在某些不需要的时候提示更新&#xff0c;而且关闭服务后总有办法重启。老是关不掉。 如果每次都是正常更新&#xff0c;好像也没啥所谓&#xff0c;但是总有那么一两次会蓝屏、黑屏、开不了机…… 52出品 下面是吾爱社区找…...

SPASS-回归分析

回归分析概述 确定性关系与非确定性关系 变量与变量之间的关系分为确定性关系和非确定性关系,函数表达确定性关系。研究变量间的非确定性关系,构造变量间经验公式的数理统计方法称为回归分析。 回归分析基本概念 回归分析是指通过提供变量之间的数学表达式来定量描述变量间…...

【使用vscode在线web搭建开发环境--code-server搭建】

官方版本下载 https://github.com/coder/code-server/releases?q4.0.0&expandedtrue使用大于版本3.8.0,因为旧版本有插件市场不能访问的情况版本太高需要更新环境依赖 拉取安装包 []# wget "https://github.com/coder/code-server/releases/download/v4.0.0/code-…...

c++ list容器使用详解

list容器概念 list是一个双向链表容器&#xff0c;可高效地进行插入删除元素。 List 特点&#xff1a; list不可以随机存取元素&#xff0c;所以不支持at.(position)函数与[]操作符。可以对其迭代器执行&#xff0c;但是不能这样操作迭代器&#xff1a;it3使用时包含 #includ…...

【案例】可视化大屏

人狠话不多,直接上效果图 这里放的地图自己去实现吧,如果也想实现3D地球话,等笔者那天有心情写篇文章; 说明:script中methods部分代码是没用,可以直接删掉,根据个人情况去写, 内容:笔者也就对页面布局进行了设计,内容的填充就靠个人了 <template><div :sty…...

js制作动态表单

JS制作动态表单&#xff0c;可以通过以下步骤实现&#xff1a; HTML布局&#xff1a;在HTML中创建一个表单元素&#xff0c;并设置一个ID属性。 <form id"myForm"><label for"name">姓名&#xff1a;</label><input type"text…...

解决Kibana初始化失败报错: Unable to connect to Elasticsearch

现象&#xff1a; 原因&#xff1a; docker run生成容器的时候&#xff0c;指定elastic server时指向了localhost 为什么不能是localhost, 因为这个localhost指向的是容器本身的网络&#xff0c;而elastic用的是物理网络&#xff0c;两个网络是隔离的&#xff0c;所以如果kiba…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...