vue 视频播放插件vue-video-player自定义样式、自动播放设置、设置一开始全屏播放视频、监听全屏事件
<style>
.video /*可不设置*/
{
margin: 48px 0;
}
.vjs-poster {
background-color: #aaaaaa00;
}
/*播放按钮设置成宽高一致，圆形，居中*/
.vjs-custom-skin > .video-js .vjs-big-play-button {
outline: none;
border: none;
width: 66px;
height: 66px !important;
background-color: rgba(0,0,0,0) !important;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
content: '';
width: 66px;
height: 66px;
background: url('../assets/icon_stop@') no-repeat;
background-size: 100% 100%;
}
/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-remaining-time{
order:3 !important;
}
/* 进度条下面的播放按钮 */
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control {
margin: 0;
line-height: 20px;
height: 94px;
padding: 50px 0 24px 0;
}
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-play-control .vjs-icon-placeholder:before {
position: absolute;
font-size: 20px;
top: 44px;
left: 24px;
width: 20px;
height: 20px;
}
/** 时间组件 */
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-control {
margin: 0;
line-height: 20px;
height: 94px;
padding: 50px 0 24px 0;
min-width: auto;
}
/* 时间-左 */
.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time {
min-width: 32px;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
margin: 0 0 0 24px !important;
}
/* 下面控件的时间分割线 */
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-time-divider {
min-width: 6px;
margin: 0 8px !important;
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(255,255,255,0.2);
line-height: 20px;
}
/* 时间-右 */
.video-js .vjs-duration, .vjs-no-flex .vjs-duration {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
line-height: 20px;
}
.video-js .vjs-control-bar {
height: 94px;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%)
}
/*进度条单独放置一行*/
.vjs-custom-skin > .video-js .-control{
position: absolute;
left: 0;
right: 0;
bottom: 68px;
width: 100%;
height: 2px;
padding: 0 24px;
}
/* 进度条背景轨道 */
.video-js .vjs-slider{
border-radius: 1em;
background-color: rgba(255,255,255,0.2);
}
/* 加载进度条背景色 */
.video-js .vjs-load-progress {
background: rgba(255,255,255,0.1);
}
/* 进度条进度 */
.vjs-custom-skin > .video-js .vjs-play-progress, .vjs-custom-skin > .video-js .vjs-volume-level{
border-radius: 1px;
background: #FFFFFF;
}
/*鼠标进入播放器后，播放按钮颜色会变*/
.video-js:hover .vjs-big-play-button, .vjs-custom-skin>.video-js .vjs-big-play-button:active, .vjs-custom-skin>.video-js .vjs-big-play-button:focus{
background-color: rgba(0,0,0,0) !important;
}
/*control bar*/
.video-js .vjs-control-bar{
background-color: rgba(0,0,0,0.2) !important;
}
/*点击按钮时不显示蓝色边框*/
.video-js .vjs-control-bar button{
outline: none;
}
.vjs-volume-panel .vjs-control .vjs-volume-panel-horizontal {
width: 0;
display: none;
}
/** 隐藏倍速 */
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-playback-rate {
display: none;
}
/** 音量按钮 */
.video-js .vjs-volume-panel {
/* display: none; */
position: absolute;
right: 48px;
bottom: 24px;
width: 20px;
height: 20px;
}
.vjs-icon-volume-high:before, .video-js .vjs-mute-control .vjs-icon-placeholder:before {
font-size: 20px;
width: 20px;
height: 20px;
line-height: 20px;
color: rgba(255,255,255,0.9);
}
.video-js .vjs-volume-bar {
margin: 8px 16px 8px 0;
}
.video-js .vjs-volume-level {
left: -21px;
}
/* 全屏组件 */
.vjs-custom-skin > .video-js .vjs-control-bar .vjs-fullscreen-control {
position: absolute;
right: 24px;
bottom: 24px;
width: 20px;
height: 20px;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before, .vjs-button > .vjs-icon-placeholder:before {
text-align: right;
}
/* 全屏按钮图标 */
.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
content: '';
width: 20px;
height: 20px;
background: url('../assets/icon_full@') no-repeat;
background-size: 100% 100%;
}
/* 全屏播放后隐藏自定义全屏图标 */
.vjs-icon-fullscreen-exit:before, .-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
background: url('');
line-height: 20px;
margin-right: 10px;
}
</style>