xgplayer插件的使用-西瓜播放器 ---- Vue3中使用

前端菜菜DayDayUp

已于 2024-04-17 18:03:19 修改

阅读量3.2k

点赞数 8

分类专栏： vue3 vue 文章标签： vue.js 前端 vue3

于 2024-04-17 18:00:56 首次发布

本文链接：https://blog.csdn.net/weixin_48594833/article/details/137881057

版权

vue 同时被 2 个专栏收录

23 篇文章

订阅专栏

17 篇文章

订阅专栏

本文介绍了西瓜播放器(xgplayer)的官方资源、优点、在Vue3项目中的下载与配置，以及如何实现视频播放、设置参数如中文界面、静音、自动播放、截图和流式布局等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

xgplayer 视频

一、xgplayer官网

xgplayer官网 - 点我进入

一、xgplayer简单介绍

西瓜播放器是字节跳动推出的一款播放器。

稳定性好（大厂（字节跳动）出品）；
插件方便实用且简洁高雅；
官网文档清晰；
集成在线生成工具；
提供示例；

总之好用实用方便就完事了

三、xgplayer下载

注意：我是在Vue3项目中使用的，版本号为 3.0.16

pnpm install xgplayer@3.0.16

四、项目中简单使用

<template>
    <div id="mse" />
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";

defineOptions({
  name: "VideoPage"
});

onMounted(() => {
  new Player({
    id: "mse", //元素id
    lang: "zh", //设置中文
    volume: 0, // 默认静音
    autoplay: false, //自动播放
    screenShot: true, // 开启截图功能

    //视频地址
    url: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",

    //封面图
    poster:
      "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
    fluid: true, // 填满屏幕 （流式布局）
    playbackRate: [0.5, 0.75, 1, 1.5, 2] //传入倍速可选数组
  });
});
</script>

<style scoped>
#mse {
  flex: auto;
}
</style>

效果：

xgplayer 视频