hsl m3u8格式的视频用vue-video-player 接入网页的实例demo

安装  vue-video-player(视频播放器)和videojs-contrib-hls(hls传输)

//安装
npm install vue-video-player --save
npm install --save videojs-contrib-hls 

//页面
<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>
  // custom skin css
  import '../src/custom-theme.css'
  // videojs
  import videojs from 'video.js'
  window.videojs = videojs//要先声明,在下方的hls.js中要用到,不然视频会出错
  // hls plugin for videojs6
  require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
  // export
  export default {
    data() {
      return {
        playerOptions: {
          // videojs and plugin options
          height: '360',
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL",
            src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
          }],
          controlBar: {
            timeDivider: false,
            durationDisplay: false
          },
          flash: { hls: { withCredentials: false }},
          html5: { hls: { withCredentials: false }},
          poster: "https://surmon-china.github.io/vue-quill-editor/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>

above attendtion:

firstly:

import videojs from 'video.js'
  window.videojs = videojs//要先声明,在下方的hls.js中要用到,不然视频会出错
  require('videojs-contrib-hls/dist/videojs-contrib-hls.js')

second:

如果打包部署后出错,如下图:

只需在webpackbase.config.js或者相关配置文件中的
 moudule对象中添加 noParse: [/videojs-contrib-hls/],

错误提示

参考地址:https://github.com/surmon-china/vue-video-player