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 (68,145
vue (4,052
vuejs (1,070
hls (117
rtmp (89
videojs (22

Find Open Source By Browsing 7,000 Topics Across 59 Categories