vue3 ts setup videojs组件化封装

<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 {
    flex: 1;
    height: 1px;

    .video-js {
        height: 100%;
        width: 100%;
    }
}
</style>

外部使用示例

<template>
  <div class="MapForLive">
    <div class="title">
      <div class="title-text">{{ pageState.DeviceId }}</div>
      <div class="title-btn">
        <el-icon @click="closePage">
          <close />
        </el-icon>
      </div>
    </div>
    <div class="content">
      <div class="video-box">
        <videoPlay :path='videoUrl' v-if="playFlag" :autoPlay='true' />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Close as close } from "@element-plus/icons-vue";
import { computed, inject, onBeforeUnmount, ref } from "vue";
import videoPlay from "@/components/checkMonitoring/DeviceLive/videoPlay.vue"
const props = defineProps<{
  pageState: any;
}>();
const emit = defineEmits(["close"]);
const closePage = () => {
  emit("close");
};
const BeginWatchLive = inject<(id: string) => Promise<any> | undefined>('BeginWatchLive')
const StopWatchLive = inject<(id: string) => Promise<any> | undefined>('StopWatchLive')
const startLive = async () => {
  if (BeginWatchLive) {
    const res = await BeginWatchLive(props.pageState.DeviceId)
    console.log(res)
    //可以开始直播了
    playFlag.value = true
  }
}
startLive()

onBeforeUnmount(() => {
  StopWatchLive && StopWatchLive(props.pageState.DeviceId)
})
const playFlag = ref(false)
const videoUrl = computed(() => {
  return `http://playhls.xxxxxxx.cn/live/${props.pageState.DeviceId}.m3u8`;
})
</script>

<style lang="scss" scoped>
.MapForLive {
  transform: translate(-32px, -20px);
  position: absolute;
  z-index: 10;
  background-color: white;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  min-width: 400px;

  &:after,
  &:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }

  &:after {
    border-top-color: white;
    border-width: 10px;
    left: 32px;
    margin-left: -10px;
  }

  &:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 32px;
    margin-left: -11px;
  }

  .title {
    height: 40px;
    line-height: 40px;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    background: #1890ff;

    .title-text {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }

    .title-btn {
      font-size: 16px;
      color: #ffffff;

      i {
        cursor: pointer;
      }

      .el-icon-edit {
        margin-right: 8px;
      }
    }
  }

  .content {
    padding: 16px;
    box-sizing: border-box;
    color: #8c8c8c;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;

    .video-box {
      height: 250px;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>