Vue-video的安装

目前为止使用了一个Vue视频组件。应该算是目前最好用的一个了
上来一个安装

cnpm i vue-video-player -S

然后引入(在哪里都行,不必在全局引入)

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

在Data中放入已经设置好的

playerOptions : {
                    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //自动播放
                    muted: false, // 是否静音
                    loop: false, // 是否循环
                    preload: 'auto', //
                    language: 'zh-CN',
                    aspectRatio: '16:9', //播放比例
                    fluid: true, //自动适应宽度
                    sources: [{
                          src: 'http://link.mxlogo.com/vide002.mp4',  // 路径
                          type: 'video/mp4'  // 类型
                        }],
                     poster: "http://laji.mxlogo.com/videoImg.jpg", //你的封面地址
                        // width: document.documentElement.clientWidth,
                     notSupportedMessage: '此视频暂无法播放,请稍后再试', 
                     controlBar: {
                          timeDivider: true,
                          durationDisplay: true,
                          remainingTimeDisplay: false,
                          fullscreenToggle: false  //全屏按钮
                      }
}

最后加一个


 

你可能感兴趣的:(vue.js)