结合使用video.js和vue播放RTMP和HLS流

vue-videojs-demo (vue-videojs-demo)

Use video.js with vue to play RTMP && HLS streams && playback.

将video.js与vue一起使用可播放RTMP && HLS流&&回放。

View demo 查看演示 Download Source 下载源

特征 (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/