3、视频播放列表及视频设置

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>

                

                <videos :videoList="item"></videos>

            </div>

        </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'  // 类型

                        },

                    ],

3、视频播放列表及视频设置

3.1 使用vue-awesome-swiper生成视频列表

3.2 使用vue-video-player播放视频

3.3 多个视频列表的渲染

推荐阅读更多精彩内容