Plyr 在 vue3 中的使用

1. 安装 Plyr

pnpm add plyr

2. 引入 Plyr

在需要使用 Plyr 的 Vue 组件中，引入 Plyr 的 CSS 和 JavaScript 文件。

import "plyr/dist/plyr.css";

import Plyr from "plyr";

3. 在模板中使用 Plyr

在 Vue 组件的`<template>`中，创建一个用于播放媒体的 HTML 元素，如`<video>`或`<audio>`，并为其设置必要的属性和 ID。

<template>

  <div>

    <video id="my-video" controls>

      <source src="your-video-source.mp4" type="video/mp4" />

    </video>

  </div>

</template>

4. 初始化 Plyr

在组件的`<script setup>`中，使用`onMounted`钩子函数来初始化 Plyr 实例。

import { onMounted } from "vue";

import "plyr/dist/plyr.css";

import Plyr from "plyr";

onMounted(() => {

  // 获取视频元素

  const video = document.getElementById("my-video");

  // 初始化Plyr实例

  if (video) {

    new Plyr(video);

  }

});

5. 监听 Plyr 事件

Plyr 提供了多种事件，如播放、暂停、结束等，可通过`on`方法进行监听。

import { onMounted } from "vue";

import "plyr/dist/plyr.css";

import Plyr from "plyr";

onMounted(() => {

  const video = document.getElementById("my-video");

  if (video) {

    const player = new Plyr(video);

    // 监听播放事件

    player.on("play", () => {

      console.log("视频开始播放");

    });

    // 监听暂停事件

    player.on("pause", () => {

      console.log("视频暂停");

    });

  }

});

6. 动态设置媒体源

若要动态设置媒体源，可以定义一个函数来更新视频的`src`属性，并重新初始化 Plyr 实例。

import { onMounted, ref } from "vue";

import "plyr/dist/plyr.css";

import Plyr from "plyr";

const videoSource = ref("your-video-source.mp4");

let player;

onMounted(() => {

  const video = document.getElementById("my-video");

  if (video) {

    player = new Plyr(video);

  }

});

const changeVideoSource = (newSource) => {

  videoSource.value = newSource;

  if (player) {

    // 销毁旧的Plyr实例

    player.destroy();

    // 获取更新后的视频元素

    const video = document.getElementById("my-video");

    if (video) {

      // 重新初始化Plyr实例

      player = new Plyr(video);

    }

  }

};