vue3+Plyr视频播放插件

前端小蔡

于 2025-04-01 16:32:38 发布

阅读量246

点赞数 1

CC 4.0 BY-SA版权

文章标签：音视频 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_44828562/article/details/146916333

<template>
  <div>
    <video id="my-video" controls>
      <source style="width: 100%;height: 700px;" src="./1.mp4" type="video/mp4" />
    </video>
  </div>
</template>
<script setup>
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)

    }

  }

}
</script>