vue使用西瓜视频插件xgplayer

news/2024/4/15 5:10:17/文章来源:https://blog.csdn.net/qq_49080170/article/details/136525646

Vue2

npm install xgplayer-vue@latest

引入xgplayer,封装成一个公共组件

src/components/xgPlayer/xgPlayer.vue

<template><Xgplayer :config="config" @player="Player = $event" />
</template><script>
import Xgplayer from 'xgplayer-vue'
export default {components: {Xgplayer},data () {return {config: {id: 'vs',url: 'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4', // 修改为能播放的视频地址width: '50%', // 宽度可以是 数字 ,也可以是百分比height: 500,// autoplay: true,download: true,poster: 'http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',playbackRate: [0.5, 0.75, 1, 1.5, 2] // 倍速},Player: null}}
}</script><style>
#xgPlayer{border: 1px solid red;
}
</style>

 组件中使用 

<template><div><h1>播放器</h1><Player  /></div>
</template><script>
import Player from '@/components/xgPlayer/xgPlayer.vue'
export default {name: 'chartContainer',components: {Player},
</script><style></style>

Vue3

<template><div style="width: 100%; height: 100%":id="id"></div>
</template>
<script setup>
import { onMounted, watch } from 'vue'
import Player from 'xgplayer'const props = defineProps({id: {type: String,required: true,},videoUrl: {type: String,default: () =>'https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',},poster: {type: String,default: () =>'http://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',},playsinline: {type: Boolean,default: true,},width: {type: String,default: '50%',},height: {type: String,default: '50%',},
})watch(() => props.videoUrl,(newUrl) => {initPlayer()},{deep: true,}
)onMounted(() => {initPlayer()
})// 初始化西瓜视频
const initPlayer = () => {let player = new Player({id: props.id,url: props.videoUrl,poster: props.poster,playsinline: props.playsinline,height: props.height,width: props.width,thumbnail: {pic_num: 44,width: 160,height: 90,col: 10,row: 10,urls: ['//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg',],},danmu: {comments: [{duration: 15000,id: '1',start: 3000,txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',style: {//弹幕自定义样式color: '#ff9500',fontSize: '20px',border: 'solid 1px #ff9500',borderRadius: '50px',padding: '5px 11px',backgroundColor: 'rgba(255, 255, 255, 0.1)',},},],area: {start: 0,end: 1,},},whitelist: [''],})//  超清、高清、标清 分别对应的地址player.emit('resourceReady', [{name: '超清',url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',},{name: '高清',url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',},{name: '标清',url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4',}])
}
</script>
<template><div class="bigBox"><h1>播放器</h1><XgPlayer :id="'xgPlayer'" /></div></template><script lang="ts" setup>
import XgPlayer from '@/components/xgPlayer/xgPlayer.vue'
import 'xgplayer/dist/index.min.css'
</script><style scoped>
.bigBox{height: 95vh !important;
}
</style>

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

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

相关文章

简洁实用的wordpress外贸网站模板

坚果蜜饯wordpress跨境电商模板 木瓜干、菠萝干、夏威夷果、芒果干、椰片、巴旦木等wordpress跨境电商模板。 https://www.jianzhanpress.com/?p3944 珠宝手饰wordpress外贸网站模板 金银手饰、珍珠手饰、翡翠手饰、钻石手饰、玉石珠宝手饰wordpress外贸网站模板。 https:…

WinSCP下载安装并结合内网穿透实现固定公网TCP地址访问本地服务器

文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本地与远程计…

数据开发 - 面经(已OC) - 北京中海通

投递流程&#xff1a; 2023.12.28 Boss 打招呼 2024.1.3 约面 2024.1.4 上午面试 &#xff08;手机端腾讯会议&#xff09; 2024.1.5 上午 通知面试通过 腾讯会议手机端无法和录影机同时运行&#xff0c;录音无效&#xff0c;之后注意使用电脑面试 面试流程&#xff1a;首…

[蓝桥杯 2020 省 B2] 平面切分

题目链接 [蓝桥杯 2020 省 B2] 平面切分 题目描述 平面上有 N N N 条直线, 其中第 i i i 条直线是 y A i ⋅ x B i y A_i \cdot x B_i yAi​⋅xBi​ 请计算这些直线将平面分成了几个部分。 输入格式 第一行包含一个整数 N N N。 以下 N N N 行, 每行包含两个整数…

nodejs web服务器 -- 搭建开发环境

一、配置目录结构 1、使用npm生成package.json&#xff0c;我创建了一个nodejs_network 文件夹&#xff0c;cd到这个文件夹下&#xff0c;执行&#xff1a; npm init -y 其中-y的含义是yes的意思&#xff0c;在init的时候省去了敲回车的步骤&#xff0c;如此就生成了默认的pac…

Linux基础命令[14]-more

文章目录 1. more 命令说明2. more 命令语法3. more 命令示例3.1 不加参数3.2 -num&#xff08;定义每页行数&#xff09;3.3 num&#xff08;从num行开始&#xff09;3.4 /pattern&#xff08;匹配显示&#xff09;3.5 快捷键 4. 总结 1. more 命令说明 more&#xff1a;分页…

ASUS华硕ROG幻15冰刃4新锐_GX502LWS_GU502LWS,LXS,LW,LU,LI,LV工厂模式原厂Win10系统包下载 带Recovery恢复

华硕幻15笔记本冰刃4电脑原装出厂Windows10系统工厂包&#xff0c;恢复出厂开箱状态oem预装系统 适用型号&#xff1a;GU502LU、GU502LI、GU502LV、GU502LW、GU502LWS 链接&#xff1a;https://pan.baidu.com/s/1Egg7bm7Um_D1qrzvRtGoCA?pwdo8m4 提取码&#xff1a;o8m4 …

react tab选项卡吸顶实现

react tab选项卡吸顶实现&#xff0c;直接上代码&#xff08;代码有注释&#xff09; tsx代码 /* eslint-disable react-hooks/exhaustive-deps */ import React, { useEffect, useState } from "react"; import DocumentTitle from react-document-title import s…

Java注解介绍

Java注解 注解介绍元注解RetentionTargetDocumentedInherited接口类测试结果 注解介绍 Java注解&#xff08;Annotation&#xff09;是一种元数据&#xff08;Metadata&#xff09;的形式&#xff0c;它可以被添加到Java代码中的类、方法、变量、参数等元素上&#xff0c;以提…

HTML静态网页成品作业(HTML+CSS)——安徽宣笔设计制作(5个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有6个页面。 &#x1f3f7;️想要…

会议活动如何高效地执行?邀请媒体到场报道的注意点

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 会议活动高效执行要点与媒体邀请注意事项 一、会议活动高效执行要点&#xff1a; 明确目标&#xff1a;确立清晰、具体的会议目的和预期成果。 详细规划&#xff1a;制定详尽的活动流程…

JVM(类加载机制)

类加载就是 .class 文件, 从文件(硬盘) 被加载到内存(元数据区)中的过程 类加载的过程 加载: 找 .class 文件的过程, 打开文件, 读文件, 把文件读到内存中 验证: 检查 .class 文件的格式是否正确 .class 是一个二进制文件, 其格式有严格的说明 准备: 给类对象分配内存空间 (先在…

向量的内积、长度、正交性

目录 向量的内积 向量的长度&#xff08;模&#xff09; 标准正交基 标准正交化 正交矩阵 向量的内积 向量的长度&#xff08;模&#xff09; 标准正交基 标准正交化 正交矩阵

FPGA IBUFG

IBUFG和IBUFGDS的输入端仅仅与芯片的专用全局时钟输入管脚有物理连接&#xff0c;与普通IO和其它内部CLB等没有物理连接。 所以&#xff0c;IBUFG输入的不能直接接另外信号。 GTH transceiver primitives are called GTHE3_COMMON and GTHE3_CHANNEL in UltraScale FPGAs, an…

室内设计AI绘画关键词怎么设置?

在室内设计AI绘画中&#xff0c;关键词的设置对于生成高质量的图片至关重要。以下是关于如何设置AI绘画关键词的一些建议&#xff1a; 首先&#xff0c;明确自己的需求&#xff0c;比如是想要生成什么样的室内设计风格&#xff0c;是简约现代、复古风还是其他风格。然后&#x…

网络安全: Kali Linux 使用 docker-compose 部署 openvas

目录 一、实验 1.环境 2.Kali Linux 安装docker与docker-compose 3.Kali Linux 使用docker-compose方式部署 openvas 4. KaliLinux 使用openvas 二、问题 1. 信息安全漏洞库 2.信息安全漏洞共享平台 3.Windows 更新指南与查询 4.CVE 查询 5.docker-compose 如何修改o…

Python通过SFTP实现网络设备配置备份

一、背景 为了防止网络设备意外损坏&#xff0c;导致配置文件无法恢复&#xff0c;可以通过将网络设备的配置文件备份到本地电脑上。 一般情况下&#xff0c;设备支持通过FTP、TFTP、FTPS、SFTP和SCP备份配置文件。其中使用FTP和TFTP备份配置文件比较简单&#xff0c;但是存在…

React 事件机制原理

相关问题 React 合成事件与原生 DOM 事件的区别React 如何注册和触发事件React 事件如何解决浏览器兼容问题 回答关键点 React 的事件处理机制可以分为两个阶段&#xff1a;初始化渲染时在 root 节点上注册原生事件&#xff1b;原生事件触发时模拟捕获、目标和冒泡阶段派发合…

基于Springboot的无人智慧超市管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的无人智慧超市管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系…

portainer管理远程docker和docker-swarm集群

使用前请先安装docker和docker-compose&#xff0c;同时完成docker-swarm集群初始化 一、portainer-ce部署 部署portainer-ce实时管理本机docker&#xff0c;使用docker-compose一键拉起 docker-compose.yml version: 3 services:portainer:container_name: portainer#imag…