vue2 安装vue-video-player

我用的是    npm install vue-video-player@4.x

在main.js全局配置

import dict from './components/Dict'

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

使用

  <video-player  class="video-player vjs-custom-skin"

  ref="videoPlayer"

  :playsinline="true"

  :options="playerOptions"

></video-player>

  data() {

    return {

      playerOptions : {

    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

    aspectRatio: '9:16', //视频比例

    fluid: true,

    notSupportedMessage: '此视频暂无法播放，请稍后再试',

    sources: [{

      type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目

      src: require('../../assets/images/91142595d2b85a46adf38e45c521e560.mp4') //url地址

    }]，

}

  }

  },

如果安装时报错routers.js:111 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.  

可以这样解决

对于使用vue-cli创建的项目，在vue.config.js中添加如下配置，然后重新打包即可

module.exports ={
runtimeCompiler:true
}