视频播放器vue3-video-play的安装与使用

官方 github 链接：GitHub - xdlumia/vue3-video-play: 适用于 Vue3 的 hls.js 播放器组件，配置丰富，界面还算好看

官方文档地址：Vue3VideoPlay

---

本文使用了 vue3-ts 创建项目，在安装配置 vue3-video-play 播放器组件的时候可能会遇到问题，如果你是 js 项目可以根据情况自行跳过报错解决。

安装

npm安装

npm i vue3-video-play --save

main.ts中引入（只展示了新增的代码）

import vue3videoPlay from "vue3-video-play";
import "vue3-video-play/dist/style.css";

createApp(App).use(vue3videoPlay);

由于项目使用了 ts，这里会因为类型报错。

在 src 下新建 shims-vue3-video-play.d.ts，报错消失。

declare module "vue3-video-play" {
  const videoPlay: any;
  export default videoPlay;
}

这时候会遇到 eslint 报错。eslint 错误是因为你在 shims-vue3-video-play.d.ts 文件中使用了 any 类型，而 ESLint 的规则 @typescript-eslint/no-explicit-any 禁止使用 any 类型，鼓励你使用更具体的类型来提高类型安全。

直接修改这个规则

{
  "rules": {
    "@typescript-eslint/no-explicit-any": "off"
  }
}

使用

这边直接使用了官方给出的示例，标题和视频地址都是官网的。

<template>
  <div class="bg-red-300 w-2/3 h-auto relative flex-col mx-auto">
    <!-- 顶部标题开始 -->
    <titleCard>视频</titleCard>
    <!-- 顶部标题结束 -->

    <!-- 主体开始 -->
    <div class="mt-2">
      <div>视频ID: {{ videoId }}</div>
      <div>
        <vue3VideoPlay
          class="vue3VideoPlay"
          v-bind="options"
          poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
        />
      </div>
    </div>
    <!-- 主体结束 -->
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import titleCard from "./components/title.vue";
import { reactive } from "vue";

const route = useRoute();
const videoId = route.params.id;

const options = reactive({
  width: "800px", //播放器宽度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
</script>

<style scoped></style>

此时直接运行，会报错。

这个错误提示 Failed to resolve entry for package "vue3-video-play" 通常表明你安装的 vue3-video-play 包在其 package.json 中指定的入口文件存在问题，导致构建工具（如 Webpack、Vite）无法正确解析该包。

对 vite.config.ts 进行修改，手动设置 vue3-video-play 的路径为 UMD 版本。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import UnoCSS from "unocss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), UnoCSS()],
  server: {
    host: "0.0.0.0",
    port: 8080,
    hmr: true,
    open: true,
  },
  resolve: {
    alias: [
      {
        find: "@",
        replacement: resolve(__dirname, "src"),
      },
      {
        // 手动设置 vue3-video-play 的路径为 UMD 版本
        find: "vue3-video-play",
        replacement: resolve(
          __dirname,
          "node_modules/vue3-video-play/dist/index.umd.js"
        ),
      },
    ],
  },
});

运行后报错，报错改变，该报错说明在 main.ts 中引入有误。

对 main.ts 进行修改

import "../node_modules/vue3-video-Play/dist/style.css";

显示正常。

可以在 options 中修改一些播放器属性。这边修改了播放器的宽高。效果如下。

  width: "100%", //播放器宽度
  height: "auto", //播放器高度