videojs播放流媒体视频

{
  "dependencies": {
    "@videojs-player/vue": "^1.0.0",
    "video.js": "^7.21.5",
    "videojs-contrib-hls": "^5.15.0",
    "vue-video-player": "^6.0.0"
},
  "devDependencies": {
    "@types/video.js": "^7.3.56",
  },
 }

<script setup lang="ts">
import videojs from 'video.js'
import type { VideoJsPlayerOptions } from 'video.js'
import 'video.js/dist/video-js.min.css'
interface MyVideoProps {
  /** 视频地址 */
  src: string
}
const props = withDefaults(defineProps<MyVideoProps>(), {})
// video标签
const videoRef = ref<HTMLElement | null>(null)
// video实例对象
let videoPlayer: videojs.Player | null = null
// video初始化完成的回调函数
const onPlayerReady = () => { }

// 初始化videojs
const initVideo = () => {
  // https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html
  const options: VideoJsPlayerOptions = {
    playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
    // aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    language: 'zh-CN', // 设置语言
    controls: true, // 是否显示控制条
    preload: 'auto', // 预加载
    loop: false, // 是否视频一结束就重新开始。
    muted: false, // 默认情况下将会消除任何音频。
    autoplay: true, // 是否自动播放
    fluid: false, // 自适应宽高
    src: props.src, // 要嵌入的视频源的源 URL
    //   poster: '', // 封面地址
    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controlBar: {
      timeDivider: true, // 当前时间和持续时间的分隔符
      durationDisplay: true, // 显示持续时间
      remainingTimeDisplay: true, // 是否显示剩余时间功能
      fullscreenToggle: true, // 是否显示全屏按钮
    },
  }
  if (videoRef.value) {
    // 创建 video 实例
    videoPlayer = videojs(videoRef.value, options, onPlayerReady)
    videoPlayer.src({
      src: props.src,
      type: 'application/x-mpegURL',
    })
  }
}

onMounted(() => {
  initVideo()
})
onUnmounted(() => {
  videoPlayer?.dispose()
})
</script>

<template>
  <video id="my-player" ref="videoRef" class="video-js w-full" style="height: calc(100vh - 50px);" />
</template>

<style lang="scss" scoped>
.w-full {
  width: 100%;
}
:deep(.vjs-big-play-button) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>