vue-video-player的快速使用

0. 介绍：vue封装的一个标签播放器(不加密的播放)

1. 安装

npm install vue-video-player --save -i https://pypi.douban.com/simple/

2.在src/main.js导入

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

3. 在组件中导入1

<!--          3-->
          <videoPlayer class="video-player vjs-custom-skin"
                       ref="videoPlayer"
                       :playsinline="true"
                       :options="playerOptions"
                       @play="onPlayerPlay($event)"
                       @pause="onPlayerPause($event)">

          </videoPlayer>

4. 在组件中导入2

// 4 加载组件
import {videoPlayer} from 'vue-video-player';

5. 在组件中导入3

// 5
      playerOptions: {
        playbackRates: [0.7, 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: "video/mp4",
          src: require("../../static/image/xx.mp4") //你的视频地址（必填） require--不写有可能报错
        }
        ],
        poster: require("../../static/image/2.png"), //视频封面图
        width: document.documentElement.clientWidth, // 默认视频全屏时的最大宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      }

6. 在组件中导入4

// 6
    onPlayerPlay() {
      alert('我在点击播放执行')
    },
    onPlayerPause() {
      alert('我在点击暂停执行')
    },

7. 在组件中导入5

components: {
    videoPlayer, // 7. 注册组件
  }