3.1 使用vue-awesome-swiper生成视频列表
（1）下载vue-awesome-swiper
npm install vue-awesome-swiper --save
（2）在main.js导入
// 在main函数导入swiper,上下滑动组件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css' #更新写法
Vue.use(VueAwesomeSwiper)
（3）新建VideoList.vue
（4）修改路由router下的index.js，VideoList.vue在index.vue的页面下，是index.vue子路由
即VideoList组件是Home下的index子路由的子路由
children: [
//导航栏1
{
path: '/index',
name: 'index',
component: () =>
import ('../views/index/Index.vue'),
// 再写一个index下的子路由，是视频的列表
children: [{
path: '/index',
name: 'index',
component: () =>
import ('../components/index/VideoList.vue')
}]
},
//导航栏2
{
path: '/follow',
name: 'follow',
component: () =>
import ('../views/follow/Follow.vue')
}
]
不要忘记在index.vue下加入<router-view/>展示路由内容的容器
（5）在VideoList.vue里引用组件Swiper, SwiperSlide，这样得到可以上下滑动的页面.
1）导入组件Swiper, SwiperSlide
2）在swiper标签下是多个swiper-slide标签，swiper-slide下是video标签放入视频链接。
<swiper :options="swiperOption"> 其中swiperOptions是data(){return{swiperOption{定义}}}定义的视频设定信息，如设定垂直方向滑动、高度占满屏幕的高度等。
<template>
<div class="video-list">
<swiper :options="swiperOption">
<!-- 上下滑动的内容 -->
<swiper-slide>
<div>
<videos></videos> #导入视频在页面里
</div>
</swiper-slide>
<swiper-slide>
<div>
<videos></videos> #导入视频在页面里
</div>
</swiper-slide>
<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</swiper-slide>
</swiper>
</div>
</template>
<script>
// 注意官网采用大写的导入
import { Swiper, SwiperSlide} from 'vue-awesome-swiper'
import Videos from '../../components/index/Videos'
export default {
name:"VideoList",
data(){
return{
swiperOption:{
direction:"vertical",
grabCursor:true,
setWrapperSize:true,
autoHeight:true, //自动高度，设为true,wrapper与container会随当前slide的高度自动调整
slidesPerView:1,
mousewheel:true,
mousewheelControl:true,
height:window.innerHeight, //高度设置，占满整个屏幕
resistanceRatio:0,
observeParents:true,
}
}
},
//导入组件：滑动的组件与导入视频的组件
components:{
Swiper,
SwiperSlide,
Videos
}
}
</script>
<style scoped> //设置样式
.video-list{
height: 100%;
}
.video-list .swiper-container{
height: 100%;
}
</style>
3.2 使用vue-video-player播放视频
（1）安装vue-video-player
npm install vue-video-player--save
（2）新建Videos.vue
（3）在mian.js中引入样式
import 'video.js/dist/video-js.css'
（4）在VideoList.vue导入组件
import Videos from '../../components/index/Videos'
（5）在Video.vue里设置导入的视频、播放按钮的位置、大小等调整。主要需要使用Video-player组件
<template>
<div class="videos">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions">
</video-player>
</div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
export default {
name:"Videos",
data(){
return{
playerOptions : {
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto',
fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [
{
src: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4', // 路径
type: 'video/mp4' // 类型
},
],
//poster: "../../static/images/test.jpg", //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar:false
}
}
},
components:{
videoPlayer
}
}
</script>
<style>
.videos{
position: relative;
}
.videos .vjs-custom-skin > .video-js .vjs-big-play-button{
background-color: rgba(0, 0, 0, 0.4);
/* font-size: 30px; */
border-radius: 50%;
height: 40px;
width: 40px;
line-height: 40px;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/* width: 50%; */
}
</style>
（6）VideoList.vue里导入Videos组件,就可以生成视频了
// 视频列表里导入Videos视频组件
import Videos from '@/components/index/Video'
component:{ Videos }
使用videos组件：
<swiper-slide>
<div>
<!-- 播放视频的标签 -->
<videos>
</videos>
</div>
</swiper-slide>
3.3 多个视频列表的渲染
（1）网上找了4个待渲染的视频的链接，放入data(){return{xx}}
dataList:[
{
id:"1",
url:"http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4"
},
{
id:"2",
url:"http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4"
},
{
id:"3",
url:"http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4"
},
{
id:"4",
url:"http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4"
}
]
（2）将上下滑动的视频内容按上述列表取出，将链接视频的内容item赋值给‘videoList’
<swiper :options="swiperOption">
<!-- 上下滑动的内容 -->
<swiper-slide v-for="(item,index) in dataList" :key="index">
<div>
<!-- 将链接视频的内容item赋值给videoList -->
<videos :videoList="item"></videos>
</div>
</swiper-slide>
<!-- <swiper-slide>
<div>
<videos></videos>
</div>
</swiper-slide>
<swiper-slide>slide1</swiper-slide>
<swiper-slide>slide2</swiper-slide> -->
</swiper>
（3）父子组件的传值，将‘videoList’数据传入Videos.vue中
props:['videoList'], //每个链接的视频
sources: [
{
src:this.videoList.url, //修改显示视频的src
// src: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4', // 路径
type: 'video/mp4' // 类型
},
],
