hhy5277 / vue-videojs-demo

Use video.js & vue to play RTMP && HLS streams && playback

vue-videojs-demo

Use video.js with vue to play RTMP && HLS streams && playback

Get Started

See: http://savokiss.me/vue-videojs-demo

In RTMP you'll see a cartoon && in HLS you'll see a dummy video

Just switch tech to see the differences

Features

• Play RTMP & HLS videos
• Auto detect stream & tech
• Support auto switch streams
• Support manual switch techs
• Support custom stream link
• Support playback link( see http://savokiss.me/vue-videojs-demo/#/playback)
• Use local swf file

Live Player Options

playerOptions: {
  autoplay: false,
  controls: true,
  techOrder: ['flash', 'html5'],
  sourceOrder: true,
  flash: { hls: { withCredentials: false } },
  html5: { hls: { withCredentials: false } },
  sources: [{
    type: 'rtmp/mp4',
    src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'
  }, {
    withCredentials: false,
    type: 'application/x-mpegURL',
    src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
  }],
  poster: '/static/images/logo.png'
}

To use local swf file, copy the swf file to /static/media/ folder && add:

   swf: '/static/media/video-js.swf'

see source: live.vue

HLS Encryption Issue

see #1150

if you encounter the hls encryption issue, use the videojs-contrib-hls.js plugin instead.

edit main.js:

// import 'videojs-contrib-hls/dist/videojs-contrib-hls'
import 'videojs-contrib-hls.js/src/videojs.hlsjs'

Related Posts

• WEB直播技术入门及在 Vue 中应用 video.js

License