vue2 组件vue-video-player播放视频，支持hls格式

参考教程：https://juejin.cn/post/6939898078526881823
官方：https://github.com/surmon-china/videojs-player

安装指令

npm install [email protected] [email protected]

安装指令要注意带上版本号，如果没有会默认使用最新版，最新版仅支持vue3，因此会出问题。

HLSPlay.vue 自定义组件代码

<template>
  <section class="HLSPlay-component">
    <video-player
        class="video-player-box"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @waiting="onPlayerWaiting($event)"
        @playing="onPlayerPlaying($event)"
        @loadeddata="onPlayerLoadeddata($event)"
        @timeupdate="onPlayerTimeupdate($event)"
        @canplay="onPlayerCanplay($event)"
        @canplaythrough="onPlayerCanplaythrough($event)"
        @statechanged="playerStateChanged($event)"
        @ready="playerReadied"
    >
    </video-player>
  </section>
</template>
<script>
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
// import videoPlayer from '@videojs-player/vue'

export default {
  name:'HLSPlay',
  props: {
    src: {
      type: String
    },
    cover_url: {
      type: String
    }
  },
  components: {
    videoPlayer
  },
  data() {
    return {
      // [配置信息](https://blog.csdn.net/qq_39905409/article/details/98481735)
      playerOptions: {
        // videojs options
        autoplay: false,
        muted: false,
        preload: 'auto',
        language: 'zh-CN',
        fluid: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            // type: 'video/mp4',
            type: 'application/x-mpegURL',
            src: this.src, // 路径
            // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
          }
        ],
        // poster: 'https://t7.baidu.com/it/u=602106375,407124525&fm=193&f=GIF',
        poster: this.cover_url, // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, // 全屏按钮
          currentTimeDisplay: true, // 当前时间
          volumeControl: false, // 声音控制键
          playToggle: true, // 暂停和播放键
          progressControl: true // 进度条
        }
      }
    }
  },
  mounted() {
    console.log('this is current player instance object', this.player)
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player
    }
  },
  methods: {
    setSrc(src) {
      // 重新设置播放地址
      this.playerOptions['sources'][0]['src'] = src;
      setTimeout(()=>{
        this.$refs.videoPlayer.player.play() // 播放
      }, 1000)
    },
    play() {
      // 手动触发播放
      this.$refs.videoPlayer.player.play() // 播放
    },
    // listen event
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    onPlayerPause(player) {
      console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      console.log('player onPlayerEnded!', player)
    },
    onPlayerWaiting(player) {
      console.log('player onPlayerWaiting!', player)
    },
    onPlayerPlaying(player) {
      console.log('player onPlayerPlaying!', player)
    },
    onPlayerLoadeddata(player) {
      console.log('player onPlayerLoadeddata!', player)
    },
    onPlayerTimeupdate(player) {
      console.log('player onPlayerTimeupdate!', player)
    },
    onPlayerCanplay(player) {
      console.log('player onPlayerCanplay!', player)
    },
    onPlayerCanplaythrough(player) {
      console.log('player onPlayerCanplaythrough!', player)
    },
    // ...player event

    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log('player current update state', playerCurrentState)
    },

    // player is ready
    playerReadied(player) {
      console.log('the player is readied', player)
      // you can use it to do something...
      // player.[methods]
    }
  }

}
</script>
<style lang="scss" scoped>
/deep/ .video-player {
  // 设置 fluid: true，宽高自适应
  // 默认  1024 * 576
  // .vjs_video_3-dimensions {
  //   width: 1024px;
  //   height: 576px;
  // }

  // 初始化，暂停按钮居中
  .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

使用组件

直接引用，如果组件配置了自动播放，则会自动播放。

<HLSPlay ref="hlsplayRef" :src="'播放地址'" :cover_url="'封面图地址'" >HLSPlay>

更新播放地址，手动触发播放

this.$refs.hlsplayRef.setSrc('播放地址')