Vue-Video-Player使用方法

1、安装vue-video-player与videojs-flash

npm install vue-video-player --save-dev
npm install videojs-flash --save-dev

2、在main.js中引入

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' // 引入样式
import 'vue-video-player/src/custom-theme.css' // 引入样式
import 'videojs-flash'
Vue.use(VueVideoPlayer)

3、组件中使用



这样就能实现rtmp直播流在浏览器中播放,但有以下几点切记,不要入坑

  1.安装vue-video-player插件一定要用npm安装,不可使用cnpm安装,否则会报:“The "flash" tech is undefined. Skipped browser support check for that tech”
    2.如果需要播放 RTMP 流,需要安装 videojs-flash 插件
    3.如果两个流都需要播放,flash 插件需要安装到 hls 插件之前
    4.如果需要播放 HLS 流,需要安装 videojs-contrib-hls 插件,非原生支持的浏览器,直播服务端需要开启 CORS
    5.如果你需要在谷歌浏览器播放,需要将谷歌浏览器的flash设置改成允许使用flash插件播放

你可能感兴趣的:(Vue-Video-Player使用方法)