Awesome Open Source
Awesome Open Source

vue-videojs-demo

FOSSA Status

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

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

License

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