video.js

npm i video.js

document

document zh-CN

m3u8/ hls

npm i videojs-contrib-hls

[document][https://github.com/videojs/videojs-contrib-hls]

<template>
  <video ref="player" class="video-js">
  </video>
</template>
<script>
// document https://videojs.com/guides/options/
// document zh-cn https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/index.html
// ^8.3.0 自带 m3u8
import videojs from 'video.js/dist/video.min.js';
import 'video.js/dist/video-js.css';
export default {
  name: 'video-player',
  props: {
    type: {
      type: String,
      default: 'video/mp4'
    },
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      player: null,
      options: {
        controls: true,
        muted: false,
        fluid: true,
        loop: false,
        preload: 'metadata',
        skipButtons: {
          forward: 5
        },
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        autoplay: false,
        language: 'zh-CN',
        aspectRatio: '4:3',
        nativeTextTracks: true
      }
    };
  },
  created() {
    this.$nextTick(() => {
      this.player = videojs(this.$refs.player, this.options, function () {
        console.log(this);
        this.src({
          src: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8',
          type: 'application/x-mpegURL',
          withCredentials: false
        });
      });
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};

</script>