点击播放后的效果
封面
{{-- 视频 start --}}
<div class="video-container" data-src="视频地址" data-poster="封面地址">
<div class="social-list__video-poster">
<img loading="lazy" src="封面地址" alt="视频封面"/>
</div>
</div>
{{-- 视频 end --}}
CSS样式参考
// 遮罩层样式
.mask-container {
position: fixed;
display: flex;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .94);
z-index: 1000;
align-items: center;
top: 0;
left: 0;
&::after {
position: absolute;
font-size: 30px;
color: #fff;
z-index: 999;
top: 0;
right: 10px;
content: '×';
}
.xgplayer {
max-height: 100%;
min-height: 240px;
}
}
//播放器样式
.xgplayer {
//隐藏不需要的图标
.xg-options-icon,
.xg-mini-layer,
.xgplayer-volume {
display: none;
}
.xgplayer-time {
min-width: 0;
font-size: 10px;
margin: 0 5px;
}
.xgplayer-controls {
z-index: 66;
}
.xgmask {
//使点击事件生效
pointer-events: auto;
}
}
//封面样式
.video-poster{
position: relative;
display: inline-block;
width: auto;
height: auto;
img {
max-width: 240px;
max-height: 240px;
border-radius: 4px;
}
//播放按钮 这里使用的是配置好的精灵图
&::before {
position: absolute;
width: 32px;
height: 32px;
z-index: 9;
top: 50%;
left: 50%;
content: '';
transform: translate(-50%, -50%);
.sprite-with-size(@btn-play, 32);
}
}
jquery
import Player from 'xgplayer';
let player;
// 点击视频生成视频实例,打开遮罩层
$body.on('click', '.video-container', function (event) {
event.preventDefault();
const {src, poster} = $(this).data();
$(this).append($('<div class="mask-container"><div id="video">
</div></div>'));
player = new Player({
id: 'video',
width: '100%',
height: '100%',
url: src,
autoplay: true,
fitVideoSize: 'fixWidth',
poster
});
$body.css('overflow', 'hidden');
});
// 点击遮罩层关闭遮罩层
$body.on('click', '.mask-container', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).remove();
$body.css('overflow', 'auto');
});
// 点击视频事件暂停和播放
$body.on('click', '#video', (event) => {
event.preventDefault();
event.stopPropagation();
if (player.paused) {
player.play();
} else {
player.pause();
}
});