1. 参考:

https://www.npmjs.com/package/vue-video-player

https://github.com/surmon-china/vue-video-player/tree/master/examples

https://surmon-china.github.io/vue-video-player/

2. 安装:

npm install vue-video-player --save

npm install --save videojs-flash

3. 在main.js中配置:

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'

require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VueVideoPlayer)

4. 在项目使用:

<template>
  <div>
    <videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>
  </div>
</template>
<script>
  import 'video.js/dist/video-js.css'
  import {videoPlayer} from 'vue-video-player'
  import 'videojs-flash'

  export default {
    components: {
      videoPlayer
    },
    data () {
      return {
        playerOptions: {
          height: '300',
          sources: [{
            type: 'rtmp/mp4',
            src: '' //rtmp流地址
          }],
          techOrder: ['flash'],
          autoplay: false,
          controls: true,
          poster: 'https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg'
        }
      }
    }
  }
</script>

5. npm install --save videojs-flash 执行过程中可能会报错

 错误一:

执行:npm install webpack-cli

错误二:

执行:npm install webpack-dev-server@2.x --save-dev

Logo

前往低代码交流专区

更多推荐