Vue 2.X 使用视频插件 video-player插件

前言：

　　了解什么是video-player

　　　　　　https://www.npmjs.com/package/vue-video-player

　　了解什么是SSR 与 SPA

　　　　　　https://www.jianshu.com/p/a4e0b58fb0a9

正文：

　　1. 安装插件：

npm install vue-video-player --save

　　2.配置插件 ：在 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)

　　3. 在自己新建的Vue组件中使用如下代码， 新建的组件video.vue

<template>
    <!--在视频外面加一个容器-->
    <div class="input_video">
    <video-player  class="video-player vjs-custom-skin"
                   ref="videoPlayer"
                   :playsinline="true"
                   :options="playerOptions"
    ></video-player>
    </div>
</template>
<script>
    export default {
        name : 'video',
        data () {
            return {
                // 视频播放
                playerOptions : {
                    playbackRates : [ 0.5, 1.0, 1.5, 2.0 ], //可选择的播放速度
                    autoplay : false, //如果true,浏览器准备好时开始回放。
                    muted : false, // 默认情况下将会消除任何音频。
                    loop : false, // 视频一结束就重新开始。
                    preload : 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language : 'zh-CN',
                    aspectRatio : '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid : true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources : [ {
                        type : "",
                        src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
                    } ],
                    poster : "", //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage : '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar : {
                        timeDivider : true,//当前时间和持续时间的分隔符
                        durationDisplay : true,//显示持续时间
                        remainingTimeDisplay : false,//是否显示剩余时间功能
                        fullscreenToggle : true  //全屏按钮
                    }
                }
            }
        }
    }
</script>
<style>
    .input_video{
        width: 400px;
        height: 400px;
        margin: 0 auto;

    }
</style>

　　4. 浏览器查看效果

　　　　

　　5. 设置 video-player的其他样式，添加到 style 标签中

/*播放按钮设置成宽高一致，圆形，居中*/
.vjs-custom-skin > .video-js .vjs-big-play-button {
  background-color: rgba(0,0,0,0.45);
  font-size: 3.5em;
  border-radius: 50%;
  height: 2em !important;
  line-height: 2em !important;
  margin-top: -1em !important;
  margin-left: -1em !important;
  width: 2em !important;
  outline: none;
}
 
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
 
/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time{
  order:3 !important;
}
 
/*进度条背景轨道*/
.video-js .vjs-slider{
  border-radius: 1em;
}
 
/*进度条进度*/
.vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level{
  border-radius: 1em;
}
 
/*鼠标进入播放器后，播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button, .vjs-custom-skin>.video-js .vjs-big-play-button:active, .vjs-custom-skin>.video-js .vjs-big-play-button:focus{
  background-color: rgba(0,0,0,0.4) !important;
}
 
/*control bar*/
.video-js .vjs-control-bar{
  background-color: rgba(0,0,0,0.2) !important;
}
 
/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button{
  outline: none;
}

 6.router文件夹下index.js添加路由路径

export default new Router({
  routes: [
　　//这个两种方式注册，与浏览器访问 
　　//(一) 注册路由路径 http://localhost:8080/#/video
    {path: '/video', name: 'video1',component:()=>import('../views/video')},
　　//（二）打开浏览器默认访问路径  http://localhost:8080/
    {path: '/', name: 'video2',component:()=>import('../views/video')},

  ]
})

7.打开浏览器访问即可