Vue3.js+Ts+Vide.js封装视频播放组件

Vue3.js+Ts+Vide.js封装视频播放组件

Video组件

<template>
  <div class="videoPlay">
    <video
      ref="m3u8_video"
      class="video-js vjs-default-skin vjs-big-play-centered"
      controls
    >
      <source :src="path" />
    </video>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import videojs, { VideoJsPlayer } from 'video.js';
import 'video.js/dist/video-js.css';
import zh from 'video.js/dist/lang/zh-CN.json';
const props = withDefaults(
  defineProps<{
    path: string;
    autoPlay?: boolean;
  }>(),
  { autoPlay: false },
);
const m3u8_video = ref();
let player: VideoJsPlayer;
const initPlay = async () => {
  videojs.addLanguage('zh-CN', zh);
  await nextTick();
  const options = {
    muted: true,
    controls: true,
    autoplay: props.autoPlay && props.path,
    loop: true,
    language: 'zh-CN',
    techOrder: ['html5'],
  };
  player = videojs(m3u8_video.value, options, () => {
    videojs.log('播放器已经准备好了!');
    if (props.autoPlay && props.path) {
      player.play();
    }
    player.on('ended', () => {
      videojs.log('播放结束了!');
    });
    player.on('error', () => {
      videojs.log('播放器解析出错!');
    });
  });
};
onMounted(() => {
  initPlay();
});
//直接改变路径测试
watch(
  () => props.path,
  () => {
    player.pause();
    player.src(props.path);
    player.load();
    if (props.path) {
      player.play();
    }
  },
);
onBeforeUnmount(() => {
  player?.dispose();
});
</script>
<style lang="scss" scoped>
.videoPlay {
  .video-js {
    width: 640px;
    height: 360px;
  }
}
</style>

外部组件的使用

<template>
    <div class="MvContent">
      <videoPlay :path="MvUrl" :autoPlay="true" />
    </div>
  </div>
</template>
<script setup lang="ts">
import videoPlay  from '@/components/Video.vue';
</script>
<style scoped lang="less">
  .MvContent {
    border-radius: 13px;
    overflow: hidden;
    margin-top: 20px;
    width: 640px;
    height: 360px;
  }
</style>