vue中使用video.js播放mp4,m3u8格式视频

复制既可用, 可根据你的业务修改

1.安装和引入必要的库：
npm install video.js videojs-contrib-hls --save

2.创建一个vue子组件：

<template>
  <div>
    <video
      :id="`video${vIndex}`"
      controlslist="nodownload nofullscreen noremoteplayback noplaybackrate"
      class="video_box"
      controls
      disablePictureInPicture
      webkit-playsinline="true"
      x5-playsinline=""
      x5-video-player-type="h5"
      x5-video-player-fullscreen=""
      playsinline
      preload="auto"
      :src="item.mvLink"
      :playOrPause="playOrPause"
      x-webkit-airplay="allow"
      x5-video-orientation="portrait"
      :loop="loop"
    ></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
export default {
  props: {
    vIndex: {
      type: Number,
      default: () => 0
    },
    item: {
      type: Object,
      default: () => ({})
    },
    loop: {
      type: Boolean,
      default: () => true
    }
  },
  methods: {
    onPlayerEnded () {
    },
    pauseVideo () {
      // 暂停\播放
    }
  },
  mounted () {
    const link = this.item.mvLink
    let type = 'video/mp4' // 默认类型
    // 简单的检查来确定类型，这里只是基于链接扩展名
    if (link.endsWith('.m3u8')) {
      type = 'application/x-mpegURL' // HLS 流的 MIME 类型
    }
    // 更新 videoOptions 中的 src 和 type
    this.videoOptions.sources[0].src = link
    this.videoOptions.sources[0].type = type
    // 初始化播放器
    this.player = videojs(`video${this.vIndex}`, this.videoOptions, () => {
      console.log('Player is ready')
      this.player.on('timeupdate', () => {
        this.$emit('onUpdateProgressBar', this.vIndex)
      })
      // 播放结束事件
      this.player.on('ended', () => {
        console.log('Playback finished')
        this.$emit('onPlaybackEnded', this.vIndex)
      })
    })
  },
  beforeDestroy () {
    if (this.player) {
      this.player.dispose()
    }
  },
  data () {
    return {
      player: null,
      playOrPause: true,
      videoOptions: {
        controls: false,
        autoplay: false,
        fluid: true,
        sources: [
          {
            src: '', // 这里不需要提前设置，将在 mounted 钩子中设置
            type: '' // 同样，这里不需要提前设置
          }
        ]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.video_box {
  height: auto;
  width: 100%;
  padding-top: 0 !important;
  > video {
    width: 100%;
    height: 100%;
  }
}
/deep/.vjs_video_3-dimensions {
  height: auto !important;
}
/deep/ .videoPlayer-dimensions {
  width: 100%;
  height: 100%;
}
/deep/ .vjs-loading-spinner {
  position: relative;
  .vjs-control-text {
    opacity: 0;
  }
}
</style>

3.父组件中使用：

<Video
  :vIndex="index"
  @onUpdateProgressBar="updateProgressBar"
  @onPlaybackEnded="onPlayerEnded($event, index, item)"
  :item="item"
  :loop="false"
></Video>

import Video from '@/components/video.vue'

components: {
  Video
}