Vue3视频播放组件 vue3-video-play使用方式

npm install vue3-video-play --save

yarn add vue3-video-play --save

import { createApp } from 'vue';
import App from './App.vue';
import videoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';

const app = createApp(App);
app.use(videoPlay);
app.mount('#app');

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

           <vue3videoPlay
            v-if="videoItem.videoUrl && videoItem.device_type == 2"
            control
            class="video-container-flv"
            :src="videoItem.videoUrl"
            style="width: 100%;height: 100%;"
            autoPlay
            :props="{
              width: '100%',
              height: '100%',
              color: '#409eff',
              title: '',
              muted: false, //静音
              webFullScreen: false,
              speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
              autoPlay: true, //自动播放
              loop: false, //循环播放
              mirror: false, //镜像画面
              ligthOff: false, //关灯模式
              volume: 0.3, //默认音量大小
              control: true, //是否显示控制
              controlBtns: [
                'audioTrack',
                'quality',
                'speedRate',
                'volume',
                'setting',
                'pip',
                'pageFullScreen',
                'fullScreen'
              ] //显示所有按钮,
            }"
          ></vue3videoPlay>

<vue3-video-play
  @play="onPlay"//播放
  @pause="onPause"//暂停
  @timeupdate="onTimeupdate"//时间更新
/>

const videoOptions = reactive({
  src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', // HLS 流地址
  type: 'm3u8', // 设置类型为 m3u8
});

<vue3-video-play
  :options="videoOptions"
/>