vue3-video-play插件是基于原生的HTML5中的<video>标签开发的，所以支持原生<video>标签的所有原生属性和方法

npm安装

npm i vue3-video-play --save 

SPA 单页面使用示例

<template>
    <div>
    <videoPlay 
    v-bind="options" 
    @play="onPlay"
    @pause="onPause" 
    @timeupdate="onTimeupdate" 
    @canplay="onCanplay" />
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'

import 'vue3-video-play/dist/style.css'
import { videoPlay } from 'vue3-video-play'

export default {
  name: '',
  components: {
    videoPlay
  },
  setup() {
    console.log('1-开始创建组件-setup')

    const data = reactive({
      options: {
        width: '800px', //播放器高度
        height: '450px', //播放器高度
        color: "#409eff", //主题色
        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, //是否显示控制器
        title: '', //视频名称
        src: "https://yun.66dm.net/SBDM/SummerTimeRendering23.m3u8", //视频源
        poster: '', //封面
        type: 'm3u8', //视频类型
      }
    })
    onBeforeMount(() => {
      console.log('2.组件挂载页面之前执行----onBeforeMount')
    })
    onMounted(() => {
      console.log('3.-组件挂载到页面之后执行-------onMounted')
    })

    const onPlay = (ev) => {
      console.log('播放')
    }
    const onPause = (ev) => {
      console.log(ev, '暂停')
    }
    
    const onTimeupdate = (ev) => {
      console.log(ev, '时间更新')
    }
    const onCanplay = (ev) => {
      console.log(ev, '可以播放')

    }

    return {
      ...toRefs(data),
      onPlay,
      onPause,
      onCanplay,
      onTimeupdate
    }
  },
}

</script>
<style scoped lang='less'>
</style>

可选属性

可选事件