前台vue|vue 实现多个视频播放 vue-video-player js|javascript|html|vue

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", // 建议浏览器在

【前台vue|vue 实现多个视频播放 vue-video-player】后台获取的数据类型