vue-videojs-demo (vue-videojs-demo)
Use video.js with vue to play RTMP && HLS streams && playback.
将video.js与vue一起使用可播放RTMP && HLS流&&回放。
特征 (Features)
Play RTMP & HLS videos
播放RTMP和HLS视频
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)
支持播放链接(请参阅http://savokiss.me/vue-videojs-demo/#/playback )
Use local swf file
使用本地SWF文件
实时播放器选项 (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文件,请将swf文件复制到/static/media/
文件夹&&添加:
swf: '/static/media/video-js.swf'
see source: live.vue
参见来源: live.vue
HLS加密问题 (HLS Encryption Issue)
see #1150
参见#1150
if you encounter the hls encryption issue, use the videojs-contrib-hls.js
plugin instead.
如果遇到hls加密问题,请改用videojs-contrib-hls.js
插件。
edit main.js
:
编辑main.js
:
// import 'videojs-contrib-hls/dist/videojs-contrib-hls'
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
翻译自: https://vuejsexamples.com/use-video-js-with-vue-to-play-rtmp-hls-streams/