Download the vue – video – player

 npm install vue-video-player --save
Copy the code

Introduced in main.js file

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
Copy the code

Introduced in the page

      <video-player
       ref="videoPlayer"
       class="video-player vjs-custom-skin"
       :playsinline="true"
       :options="playerOptions"
       @play="onPlayerPlay($event)"// Listen to the start state @pause="onPlayerPause($event)"// Listen to pause status />Copy the code

Configure in data on the page

{// playbackRates: [0.7, 1.0, 1.5, 2.0], // Autoplay:false/ / iftrueStart playback when the browser is ready. muted:false, // Any audio will be eliminated by default. loop:false// Causes the video to restart as soon as it ends. preload:'auto'// Suggest whether the browser should start downloading the video data after the <video> element loads. Auto Browser selects the best behavior and starts loading the video immediately (if the browser supports it)'zh-CN',
        aspectRatio: '16:9', // Place the player in smooth mode and use this value when calculating the player's dynamic size. The value should represent a scale - two numbers separated by colons (e.g"16:9"or"4:3") fluid:true. / / whentrueWhen, the Video.js player will have fluid size. In other words, it will scale to fit its container. sources: [ {type: 'video/mp4'// There are many types of support: basic video format, live streaming, streaming media, etc. See git website project SRC:'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'}], HLS:true,
        poster: 'http://pic33.nipic.com/20131007/13639685_123501617185_2.jpg', / / you address width: the cover of the document. The documentElement. ClientWidth, / / notSupportedMessage player width:'This video cannot play now, please try again later', // allows you to override the default information displayed when video.js cannot play a media source. controlBar: { timeDivider:true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true// Full screen button}},Copy the code

Mount video component (optional) Playback can be done without writing this step, this is added for custom button use

 computed: {
    player() {
      return this.$refs.videoplayer. player// Custom play}},Copy the code

The official documentation

Video.js:docs.videojs.com/docs/api/pl… Vue-video-player:github.com/surmon-chin…

Do not need compatible with M3U8, the above can be implemented to play compatible with M3U8 need to download

 npm install --save videojs-contrib-hls
Copy the code

Import in the file

Import 'videojs-contrib-hls' const HLS = require(' contrib-hls',' contrib-hls', 'contrib-hls')'videojs-contrib-hls'(That's all rightCopy the code

Test on the page

          {
            type: 'application/x-mpegURL'// There are many types of support: basic video format, live streaming, streaming media, etc. See git website project SRC:'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8'// The url can be seen from other bloggers.Copy the code

Now you’re ready to play