h5：jquery+xgplayer实现点击封面全屏播放视频

点击播放后的效果

 

封面

 

 

{{-- 视频 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();
        }
});