<div class="sjodfkhhhg visible-xs visible-sm">    
<div class="mobilevideo">    
<video id="bgVideo"  muted="" loop="" playsinline="" poster="//cdn.myxypt.com/55e452f2/25/08/caa86f354a83871e2aca4a231697a492f091cfad.jpg"    
            width="100%" height="100%" style="text-align: -webkit-center; margin: 0 auto;" class="h300">    
<source src="https://media.myxypt.com/55e452f2/25/07/20250728090611zz1i02yamucy4hfhto6s.mp4?Expires=1786170315&OSSAccessKeyId=STS.NZ5TCUpBWkY3DHqrsw5Gx5jvJ&security-token=CAISzgJ1q6Ft5B2yfSjIr5mAH%2FnhnZ123JvYRm7AlnMiOchU2q%2FdqDz2IH1Of3NqBu0Xtv42n2FX6%2FgZlqFtSpNIQmvfdpPzKRu%2BZ1jzDbDasumZsJYm6vT8a0XxZjf%2F2MjNGZabKPrWZvaqbX3diyZ32sGUXD6%2BXlujQ%2Fbr4NwdGbZxZASjaidcD9p7PxZrrNRgVUHcLvGwKBXn8AGyZQhKwlMg0TkjufjlmpLHt0CO3A3Ap7VL99irEP%2BNdNJxOZpzadCx0dFte7DJuCwqsEUQr%2F0s0%2FEVoW2e5YDCXgcK%2BWaPN%2BvF79toNxRlYas3HaFJqvXmnOF%2FoPbUk4nnG4bIsl3MhU41LaHXI6uscIvBXr5R%2Fqbu%2BqdEJQn3KYMDtS0uV2AmGhWLh7ZO0YeI8NXVu%2FwXx07mAA6Uv9v7FZCN6Ku%2F2%2BJ%2F112GlcZERBTRK93xGoABPE%2BDIarBS53qdFiy4Ve3Hr7g2ubFvCsSkJGyQsafITppgDkGMlRpZXXLdkyFvbUekUVNRPV7G5%2BWc71azemXho2uEPPtKfzoztJio0jNcUSSRRmnPRK437ULF50XsjQLDI5w4eWb0C2fVxeatL6xK9%2FGPCP6GSbmtLY4j7Jej4ggAA%3D%3D&Signature=M5MtZt6Pc7RQmLhYdswRWQQF4w0%3D" type="video/mp4">    
</video>    
<div class="video-control" id="videoControl">    
<i class="fas fa-pause"></i>    
</div>    
</div>    
</div>    

<script src="//cdn.myxypt.com/tdwvbydm/t/1/assets/mobilevideo.js?v=1786169715"></script>
<script>
    // 初始化视频控制器
    const controller = initVideoController({
        videoId: 'bgVideo',
        controlId: 'videoControl',
        playIcon: 'fa-play',
        pauseIcon: 'fa-pause',
        autoPlay: false,
        onPlay: () => console.log('视频开始播放'),
        onPause: () => console.log('视频已暂停')
    });
</script>


<style>

.mobilevideo {
    position: relative;
    height: 300px;
}

.video-control {
    position: absolute;
    bottom: 15px;
    left: 2%;
    width: 27px;
    height: 28px;
    background: rgba(102,102,102,0.65);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999;
}

.video-control:hover {
    background: rgba(0,0,0,0.9);
}

.video-control i {
    color: #333;
    font-size: 18px;
    height: 100%;
}

.fa-pause:before {
    background-image: url(//cdn.myxypt.com/674a0c8e/25/07/62b7cb0f55521e84495e666a8ebc4882c9b27ace.png);
    filter: brightness(0) invert(1);
}

.fa-play:before {
    background-image: url(//cdn.myxypt.com/674a0c8e/25/07/62b53a91c48a349a44649656e009e795294c6f37.png);
    filter: brightness(0) invert(1);
}

.video-control i {
    color: #333;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center
}

.fa-pause:before,.fa-play:before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle
}

.xypg-product-detail video {
    display: block;
}

#bgVideo,#bgVideo1,#bgVideo2,#bgVideo3 {
    width: 100%;
    object-fit: cover;
    background: #fff;
}

@media(max-width: 480px) {
    .h300 {
        height: 300px;
    }
}

.mobilevideo .video-control {
    left: 50%;
    margin-left: -13.5px;
    background: none;
    top: 50%;
    transform: translateY(-50%);
}

.mobilevideo .video-control .fa-play:before{
    background: url(//cdn.myxypt.com/674a0c8e/25/07/413c61544fa7b6894a053de249c08f5740a1f925.png) no-repeat 50% 50%;
    background-size: 100% 100%;
    width: 50px;
    height: 50px;
        filter: none;
        opacity: 0.6;
}

</style>