学习笔记
这里是官方关于在vue中如何使用的文档,下面的只是基于官方文档的基础用法,详细内容建议查看官方文档! 官方文档 以此为例 先看效果: 大致步骤如下: 一、安装video.js
npm install --save video.js
二、参考官方文档操作 这里定义一个名为VideoJs的组件,便于使用。 注意要引入下面的video-js.css和video.js!!,一个是样式,一个是播放器。
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
export default {
name: "VideoJs",
props: {
options: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null
}
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
console.log('onPlayerReady', this);
})
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
}
}
在页面中使用该组件:样式使用了element ui,需要的可以自行安装 主要的是data中的videoOptions,与组件绑定。
Welcome to my Blog
import VideoJs from '@/components/Main/VideoJs';
import 'video.js/dist/video-js.css';
export default {
name: "PageOne",
components: {
VideoJs,
},
data(){
return{
videoOptions: {
controls: true,//开启交互,即是用户可控。
muted: true,//开启视频时是否静音
fluid: true,//根据外层css样式大小,自动填充宽高!比较实用,可搭配响应式
reload: "auto",//重载
//其余设置根据需求添加!
poster: require('@/assets/images/海贼王.jpg'),//视频封面
sources: [//视频播放源,建议本地
{
src: require('@/assets/videos/海贼王.mp4'),
type: "video/mp4"
}
]
}
}
},
created() {
},
methods: {
},
}
.background{
background: linear-gradient(to right, #c2e59c, #64b3f4);
width: 100%;
height: calc(100vh - 57px);
}
.welcome-row{
width: 100%;
text-align: center;
margin-top: 36px;
}
.welcome{
color: white;
font-size: 64px;
font-weight: 600;
font-family: helveticaneuew01-75bold,sans-serif;
}
.video-box{
width: 100%;
min-width: 456px;
height: 100%;
border-radius: 20px;
background-color: rgba(255,255,255,1);
box-shadow: 0 2px 4px rgba(255,255,255,0.8);
display: flex;
align-items: center;
justify-content: center;
margin-top: 24px;
}
.video{
width: 92%;
}
.video-css{
width: 100%;
height: 100%;
}
Talk is cheap, show me the code !—— 薪火工作室!