Use video.js with vue to play RTMP && HLS streams && playback
See: https://vue-videojs-demo.vercel.app/
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 https://vue-videojs-demo.vercel.app/#/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'