vue-hls-video

hls-video

对 hls-video-player 进行修改，用法不变

vue播放hls视频流的播放器组件( 内部集成了videojs )

install

npm install vue-hls-video

or

yarn add vue-hls-video

global registry component

import Vue from 'vue'
import { HlsPlayer } from 'vue-hls-video'

Vue.component('HlsPlayer',HlsPlayer)

in vue component

import { HlsPlayer } from 'vue-hls-video'
export default {
    name: 'MyComponent',
    component:{
        HlsPlayer
    }
}

播放hls流

  <HlsPlayer
    play-url="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
  ></HlsPlayer>

播放mp4

  <HlsPlayer
    play-url="http://vjs.zencdn.net/v/oceans.mp4"
    video-type="video/mp4"
  ></HlsPlayer>

视频设置背景和封面一致

<HlsPlayer
    play-url="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
    :posterToBg="true" <!-- 设置视频背景和封面一致 -->
  ></HlsPlayer>