vue 实现多个视频播放 vue-video-player

vue 实现多个视频播放 vue-video-player

实现方式：利用vue的一个组件 vue-video-player

步骤一：安装vue-video-player插件
安装：npm install vue-video-player --save或者cnpm install vue-video-player --save
步骤二：在main.js入口文件中引入

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

步骤三：在自己需要的页面进行引用

          
          
{{ item.title }}
          
{{ item.represent }}
        

步骤四：从后台获取视频的地址，标题，封面等你需要的数据

 if (res.code == 0) {
          this.reply = res.response;
          for (let i of this.reply) {
            let arrStr = {
              playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
              autoplay: false, //如果true,浏览器准备好时开始回放。
              muted: false, // 默认情况下将会消除任何音频。
              loop: false, // 导致视频一结束就重新开始。
              preload: "auto", // 建议浏览器在

后台获取的数据类型

效果图如下