vue3-video-play插件

        1. 安装

npm i vue3-video-play

        2. 引入

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

        3. 使用

  <vue3videoPlay
    width="100%"
    v-bind="options"
    ref="videoPlayer"
    :currentTime="currentTime"
    @timeupdate="handleTimeUpdate"
  />

let options = reactive({   
        width: "800px", //播放器高度
        height: "450px", //播放器高度
        color: "#409eff", //主题色
        title: "1111", //视频名称
        src: props.video_url, //视频源
        muted: false, //静音
        webFullScreen: false,
        speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
        autoPlay: false, //自动播放
        loop: false, //循环播放
        mirror: false, //镜像画面
        ligthOff: true, //关灯模式
        volume: 0.3, //默认音量大小
        control: true, //是否显示控制,
        speed: true,
        current: '', //已播放时长
        controlBtns: [
          "audioTrack",
          "quality",
          "speedRate",
          "volume",
          "setting",
          "pip",
          "pageFullScreen",
          "fullScreen",
        ], //显示所有按钮,
     })
 
  const currentTime = ref(0)
  const handleTimeUpdate = (event) => {
      //   console.log('变化', currentTime.value)
      currentTime.value = event.target.currentTime
    }