vue中实现hls视频播放

vue-video-player

vue-video-player 是基于 video.js 进行封装的视频播放
包含的依赖：
video
videojs-contrib-hls

npm install vue-video-player --save

使用

 <video-player :options="videoOptions" @ready="playerReadied" ></video-player>

options 配置

videoOptions: {
        height: '360',
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: 'http://153.37.97.124:7086/live/cameraid/1000016%240/substream/1.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'
      }

相关方法：

playerReadied (player) {
      var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
      player.tech_.hls.xhr.beforeRequest = function (options) {
        // console.log(options)
        return options
      }
    }

dplayer

npm install dplayer --save

vue中简易封装

参考作品：vue-dplayer
跟着作者的源码重新走了一遍

import DPlayer from 'dplayer'
import '../../../node_modules/dplayer/dist/DPlayer.min.css'

const VueDPlayer = {
  props: {
    options: {
      type: Object
    }
  },
  data () {
    return {
      dp: null
    }
  },
  mounted () {
    this.options.container = this.$el
    const player = this.dp = new DPlayer(this.options)
    const events = player.events
    Object.keys(events).forEach(item => {
      if (item === 'events') {
        return false
      } else {
        events[item].forEach(event => {
          player.on(event, () => this.$emit(event))
        })
      }
    })
  },
  install (Vue, { name = 'd-player' } = {}) {
    Vue.component(name, this)
  },
  render (h) {
    return h('div', {
      class: 'dplayer'
    }, [])
  }
}

if (typeof window !== 'undefined' && window.Vue) {
  window.VueDPlayer = VueDPlayer
}

export default VueDPlayer

使用

<div style="width:200px;height:400px;">
     <d-player :options="options"></d-player>
   </div>

如果播放hls

npm install --save hls.js

使用示例

<template>
  <div style="width:600px;height:400px;">
     <d-player :options="options"></d-player>
   </div>
</template>
<script>
import Hls from 'hls.js'
export default {
  name: 'videoPlay',
  props: {
    url: {
      type: String,
      default: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'
    },
    type: {
      type: String,
      default: 'customHls'
    },
    pic: {
      type: String,
      default: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
    }
  },
  data () {
    return {
      options: {
        video: {
          url: this.url,
          pic: this.pic,
          type: this.type,
          customType: {
            // 针对 HLS播放其他使用类似
            'customHls': function (video, player) {
              const hls = new Hls()
              hls.loadSource(video.src)
              hls.attachMedia(video)
            }
          }

        },
        live: false,
        danmaku: false,
        autoplay: false,
      }
    }
  }
}
</script>

参数说明：

customHls ``` | | | |

具体Dplayer官方参考文档

文档地址：http://dplayer.js.org