vue设置video图片_vue video和vue-video-player实现视频铺满教程

网页放置视频播放器，我一般都是用video.js和它的插件vue-video-player

一：Video.js

需求：对于简单的视频播放需求来说，video.js足以胜任了。

它可是支持HTML5和Flash的视频播放器呦。

1：安装video.js

npm install -s video.js

2:在main.js文件中引入相关文件

import Video from 'video.js'

import 'video.js/dist/video-js.css'

Vue.prototype.$video = Video

3:在组件中使用

id="myVideo"

class="video-js"

>

:src="videoUrl"

type="video/mp4"

>

export default {

name: "Video",

data() {

return {

videoUrl:'...',//视频地址

};

},

mounted() {

this.initVideo(); //初始化视频播放器

},

methods: {

initVideo() {

//初始化视频方法

let myPlayer = this.$video(myVideo, {

//是否显示控制栏

controls: true,

//是否自动播放,muted:静音播放

autoplay: false,

//是否静音播放

muted:false,

//是否流体自适应容器宽高

fluid:true,

//设置视频播放器的显示宽度(以像素为单位)

width: "800px",

//设置视频播放器的显示高度(以像素为单位)

height: "400px"

});

}

}

};

.video_text{

width: 70%;

margin: 0 auto;

}

video:focus{

outline: 0; //去掉选中蓝框

}

.video-js .vjs-big-play-button{

/*对播放按钮的样式进行设置*/

width: 100px;

height: 60px;

position: absolute;

top: 50%;

left: 50%;

transform: translate3d(-50%,-50%,0);

}

4：效果图

5:附上video.js的一些基本方法

myPlayer.ready(function(){

//视频播放器初始化完成后的回调函数，this代表当前播放器，可以在这进行一系列的操作(myPlayer为我视频播放器对象)

myPlayer.play(); //播放

myPlayer.pause(); //暂停

var currentTime = myPlayer.currentTime(); //当前播放进度

myPlayer.currentTime(120); //自定义修改当前进度

var duration = myPlayer.duration(); //加载完成视频后就可以获取视频总时长了，注意：在flash情况下无效！

var buffered = myPlayer.buffered(); //视频缓冲，返回值为下载了多大文件

var bufferedPercent = myPlayer.bufferedPercent(); //视频缓冲，返回值为下载了百分之几

var volume = myPlayer.volume(); //获取视频音量大小，值在0-1之间

myPlayer.volume(0.2); //设置视频音量大小

var width = myPlayer.width(); //获取视频的宽度

myPlayer.width(640); //设置视频的宽度

var howTallIsIt = myPlayer.height(); //获取视频的高度

myPlayer.height(200); //设置视频高度

myPlayer.size(640,480); //同时设置视频高宽

myPlayer.enterFullScreen(); //视频全屏显示

myPlayer.enterFullS