vue video和vue-video-player实现视频铺满教程
28 浏览量
2021-01-18
17:49:22
上传
评论
收藏 197KB PDF 举报
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:在组件中使用在组件中使用
<template>
<div class="video_text">
<video
id="myVideo"
class="video-js"
>
<source
:src="videoUrl"
type="video/mp4"
>
</video>
</div>
</template>
<script>
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"
});
}
}
};
</script>
<style lang="less">
.video_text{
width: 70%;
margin: 0 auto;
}
video:focus{
outline: 0; //去掉选中蓝框
}
.video-js .vjs-big-play-button{
/*对播放按钮的样式进行设置*/
width: 100px;
height: 60px;
资源评论
