video-player视频播放器基础使用

在做项目引用了video-player插件 

点击跳转官网地址

根据官方文档导入依赖，使用局部引入时，插件导入出现异常，于是选择了全局引入方法

 依赖安装

npm install vue-video-player -S

引入

// 在main.js里面引入

import "video.js/dist/video-js.css";

import {videoPlayer} from "vue-video-player";

Vue.use(VideoPlayer) 

插件使用

先预定义一个播放器容器

<video-player :options="playerOptions" controls></video-player> 

options：视频配置项属性

cotrols：是否显示控制条

在data中定义好所需配置项

playerOptions: {
    // videojs options
    muted: true,
    language: 'en', // 语言，'en', 'zh-cn', 'zh-tw'
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选的播放速度
    sources: [{
        type: "video/mp4", // 播放视频类型
        src: "播放视频资源路径", // 播放视频资源路径
    }],
    poster: "封面资源路径", // 封面资源路径
    width: 500,
    height: 320,
    notSupportedMessage: '暂未生成视频，请点击生成视频', // 无法播放媒体源时显示的默认信息。
}

官方文档地址：https://docs.videojs.com/tutorial-options.html