// 安装依赖

npm install vue-video-player --save

npm install videojs-contrib-hls --save

// 在main.js中全局引入

import VideoPlayer from 'vue-video-player';

import 'video.js/dist/video-js.css';

import 'vue-video-player/src/custom-theme.css';

import videojs from 'video.js';

window.videojs = videojs;

require('videojs-contrib-hls/dist/videojs-contrib-hls.js');

Vue.use(VideoPlayer);

//组件中使用

<template>

  <md-card>

    <md-card-actions>

      <div class="md-subhead">

        <span>HLS Live / 直播</span>

      </div>

      <md-button class="md-icon-button"

                 target="_blank"

                 href="https://github.com/surmon-china/vue-video-player/tree/master/examples/04-video.vue">

        <md-icon>code</md-icon>

      </md-button>

    </md-card-actions>

    <md-card-media>

      <div class="item">

        <div class="player">

          <video-player class="vjs-custom-skin"

                        :options="playerOptions"

                        @ready="playerReadied">

          </video-player>

        </div>

      </div>

    </md-card-media>

  </md-card>

</template>

<script>

  export default {

    data() {

      return {

        playerOptions: {

          // videojs and plugin options

          height: '360',

          sources: [{

            withCredentials: false,

            type: "application/x-mpegURL",

            src: "path-to/playlist.m3u8"

          }],

          controlBar: {

            timeDivider: false,

            durationDisplay: false

          },

          flash: { hls: { withCredentials: false }},

          html5: { hls: { withCredentials: false }},

          poster: "path-to/static/images/surmon-5.jpg"

        }

      }

    },

    methods: {

      playerReadied(player) {

        var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls

        player.tech_.hls.xhr.beforeRequest = function(options) {

          // console.log(options)

          return options

        }

      }

    }

  }

</script>