Use video.js with vue to play RTMP && HLS streams && playback
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
- 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
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
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'