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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/152899.shtml

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

相关文章

PDF控件Spire.PDF for .NET【转换】演示:自定义宽度、高度将 PDF 转 SVG

我们在上一篇文章中演示了如何将 PDF 页面转换为 SVG 文件格式。本指南向您展示如何使用最新版本的 Spire.PDF 以及 C# 和 VB.NET 指定输出文件的宽度和高度。 Spire.Doc 是一款专门对 Word 文档进行操作的 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻…

MyBatis 快速入门

MyBatis 快速入门 前言什么是 MyBatis简介核心特性使用示例配置文件Mapper 接口SQL 映射文件使用 MyBatis 如果大家对以上的导读很懵怎么办&#xff01;没关系 往下阅读&#xff01; 1. MyBatis 介绍1.1. 什么是MyBatis1.2. 持久层1.3. 框架1.4. JDBC 弊端1.5.…

如何解决网站被攻击的问题:企业网络攻防的关键路径

在当今数字化时代&#xff0c;企业面临着不断升级的网络威胁&#xff0c;网站遭受攻击的风险也与日俱增。解决网站被攻击的问题对企业发展至关重要&#xff0c;不仅关系到企业的信息安全&#xff0c;也直接影响到企业的声誉和利益。从企业发展的角度出发&#xff0c;我们将探讨…

科技云报道:全球勒索攻击创历史新高,如何建立网络安全的防线?

科技云报道原创。 最简单的方式&#xff0c;往往是最有效的&#xff0c;勒索软件攻击就属于这类。 近两年&#xff0c;随着人类社会加速向数字世界进化&#xff0c;勒索软件攻击成为网络安全最为严重的威胁之一。今年以来&#xff0c;勒索软件攻击在全球范围内呈现快速上升态…

开源和闭源的优劣势比较

开源与闭源软件之争一直是技术领域一个备受关注的话题&#xff0c;而在近期特斯拉CEO马斯克的表态中&#xff0c;关于开源的讨论更是引发了广泛的关注。以下是一些关于开源和闭源的优劣势以及对未来大模型发展的一些见解&#xff1a; 开源软件的优势&#xff1a; 创新与合作&a…

HDCTF2023 - Reverse方向全WP

文章目录 [HDCTF 2023]easy_re[HDCTF 2023]easy_asm[HDCTF 2023]fake_game[HDCTF 2023]enc[HDCTF 2023]double_code[HDCTF 2023]买了些什么呢[HDCTF2023]basketball [HDCTF 2023]easy_re UPX壳&#xff0c;脱壳 一个base64编码。 [HDCTF 2023]easy_asm ida打开后可以看到xor 10…

【FPGA】IP核

一.IP核是什么 IP&#xff1a;知识产权&#xff0c;半导体产业中&#xff1a;在ASIC和FPGA中定义为预先设计好的电路功能模块。 在使用的时候其他用户可以直接调用IP核心。 二. 为什么要是有IP核 提高开发效率&#xff0c;减小设计和调试的时间&#xff0c;加速开发进程&am…

go 判断两棵树内容是否一致

goroutine http://127.0.0.1:3999/concurrency/8 question 使用 go 判断 两个 树 存放的 序列 是否 相同, 如果 相同 他们 被称为 equivalent_tree tree struct type Tree struct {Left *TreeValue intRight *Tree }由于 递归的 写法 比较简单, 此处 使用循环的 形式 来实…

Rabin加解密算法(python3)

Rabin加解密算法 详细代码如下&#xff1a; # 空空 # dahouzi.cn import random from sympy import isprimedef decrypt_rabin(c, p, q):"""解密 Rabin 密文Args:c (int): 密文p (int): 素数 pq (int): 素数 qReturns:tuple: 解密结果 M1, M2, M3, M4"&q…

数据库管理工具,你可以用Navicat,但我选DBeaver!

大家好&#xff0c;我是豆小匠。数据库GUI工具哪家强&#xff0c;众人遥指Navicat。 可是Navicat老贵了。 如果公司有正版授权的还好&#xff0c;如果没有正版授权&#xff0c;还不给你用盗版&#xff0c;那才叫绝绝子。 好了&#xff0c;主角登场&#xff0c;DBeaver&#x…

Protege简单教程(安装启动建模推理)

Protege 是一个用于本体编辑和OWL (Web Ontology Language) 开发的开源工具。下面是一个简单的 Protege 使用教程。 1. 下载和安装 Protege 首先&#xff0c;需要下载 Protege。可以从官方网站 Protege 下载最新版本。 2. 启动 Protege 安装完成后&#xff0c;启动 Protege…

基于安卓android微信小程序美容理发店预约系统app

项目介绍 为美容院设计一个系统以减少员工的工作量就成为了想法的初始状态。紧接着对美容院进行进一步的调查发现我的想法已然落后。基本上每个美容院都以有了自己的信息系统&#xff0c;并且做的已经较完善了。 在这时我突然想到&#xff0c;现在关注美容养生的人越来越多&am…

智能井盖传感器建设信息化时代智慧城市

近年来随着信息技术的快速发展和城市化进程的加速推进&#xff0c;智慧城市的概念逐渐成为现实。作为智慧城市生命线建设中的重要组成部分&#xff0c;智能井盖传感器的应用正在为城市的可持续发展和居民的生活质量提供新的解决方案。 智能井盖传感器能够实时监测井盖状态&…

小程序如何刷新当前页面

小程序可以通过调用wx.pageScrollTo()方法来实现刷新当前页面&#xff0c;该方法可以滚动页面并使页面滚动到顶部&#xff0c;从而达到刷新页面的效果。具体的操作步骤如下&#xff1a; 在需要刷新的页面中添加一个按钮或其他触发事件的元素。 绑定相应的点击事件&#xff0c;…

vue3父组件提交校验多个子组件

实现功能&#xff1a;在父组件提交事件中校验多个子组件中的form 父组件&#xff1a; <script setup lang"ts">import {ref, reactive} from vueimport childForm from ./childForm.vueimport childForm2 from ./childForm2.vuelet approvalRef ref()let ap…

Avoiding Row-by-Row Processing 避免逐行处理

Avoiding Row-by-Row Processing 避免逐行处理 A set-based program and row-by-row processing are not mutually exclusive: some rules do call for rowby-row processing, but these rules are the exceptions. You can have a row-by-row component within a mostly set-…

图像分割方法

常见的图像分割方法有以下几种&#xff1a; 1.基于阈值的分割方法 灰度阈值分割法是一种最常用的并行区域技术&#xff0c;它是图像分割中应用数量最多的一类。阈值分割方法实际上是输入图像f到输出图像g的如下变换&#xff1a; 其中&#xff0c;T为阈值&#xff1b;对于物体的…

论文阅读:“iOrthoPredictor: Model-guided Deep Prediction of Teeth Alignment“

文章目录 IntroductionMethodologyProblem FormulationConditional Geometry GenerationTSynNetAligned Teeth Silhouette Maps Generation ResultsReferences Github 项目地址&#xff1a;https://github.com/Lingchen-chen/iOrthopredictor Introduction 这篇文章提出了一种…

国家开放大学平时作业训练题

卷代号&#xff1a;1400 机器人技术及应用 参考试题 一、单项选择题&#xff08;每小题3分&#xff0c;共45分&#xff09; 1.在变径轮和变形车轮的设计中&#xff0c;借鉴了&#xff08; &#xff09;的设计&#xff0c;使得车轮可以主动变形进行越障。 A.滑块机构 …

golang学习笔记——日志记录

文章目录 日志与错误log包记录到文件记录框架Contextual LoggingLeveled LoggingSetting Global Log Level Error Logging 日志与错误 通常&#xff0c;发生错误时&#xff0c;最终用户只会看到一条消息&#xff0c;指示程序出现问题。日志是简单错误消息以外的更多信息。 lo…