Awesome Open Source
Awesome Open Source


FOSSA Status

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

Get Started


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

Just switch tech to see the differences


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://'
  }, {
    withCredentials: false,
    type: 'application/x-mpegURL',
    src: ''
  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


FOSSA Status

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,550,642
Vue (84,162
Vuejs (9,899
Hls (515
Rtmp (361
Videojs (138
Related Projects