外贸网站建设,外贸网站建设公司,跨境电商独立站

问题来源：网页中的视频在安卓，鸿蒙下都正常，在苹果的微信浏览器，苹果自带的safari浏览器都正常，就是苹果的百度浏览器，一打开网站首页，还在顶部幻灯片的时候，网页底部的视频就开始弹出来个窗口出来播放了，而且置于最顶端。

为什么只有苹果的百度浏览器会这样？

苹果端的百度浏览器（以及部分旧版 UC、QQ 浏览器）在解析网页时，会强行使用它自己魔改过的内置播放器。当它的 IntersectionObserver 产生首屏误判，或者它检测到网页里有一个 <video> 标签时，它的内核为了所谓的“用户体验”，会强行把视频剥离出网页，单独弹出一个悬浮窗口置顶播放。这就把你的网页布局彻底搞乱了。

既然如此，所以我们就一开始不要让百度浏览器检测到网页中的VIDEO, 所以在写VIDEO标签的时候，不要将视频写入SRC中，要不然他就检测到了视频，写在data-src中。然后再写一个按钮，点击播放视频。

参考代码如下：HTML

 <div class="myvideo">
             <video  id="myVideo"  data-src="/static/video/1.mp4"   poster="[content:ico]"  preload="none" muted   loop playsinline  class="w-100"  data-aos="fade-in" data-aos-duration="1000" 
             playsinline="true" 
    webkit-playsinline="true" 
    x5-video-player-type="h5-page" 
    x5-video-player-fullscreen="true"
    x5-video-orientation="portait" ></video>            
             <a  id="palyvideo"><i class="bi bi-play-circle-fill fs-100 fs-sm-40"></i><div class="fs-40 fs-sm-20 mt-1 colorfff">Play Video</div></a>
            </div>

以下是JS代码：逻辑更多一些

1：一开始是不加载视频的，等点击播放按钮之后再加载视频，将data-src中的视频放到src中，从而播放视频。

2：网页往上滑或者往下滑的时候，离开视窗，视频则暂停播放。

3：回到视窗之后，视频恢复播放。

4：第2和第3的逻辑必须在第一次点击之后才执行，否则如果一直没有点击播放视频，上滑下滑依旧会播放视频。

5：在视频播放的时候，再次点击页面，暂停播放。

以上便是下面JS的全部逻辑。

<script>
document.addEventListener('DOMContentLoaded', function () {
    const video = document.getElementById('myVideo');
    const playBtn = document.getElementById('palyvideo');
    let hasStartedPlaying = false;

    // 播放逻辑封装
    function startVideo() {
        if (!hasStartedPlaying) {
            const realSrc = video.getAttribute('data-src');
            if (realSrc) {
                video.src = realSrc;
                video.load();
            }
            hasStartedPlaying = true;
        }
        video.muted = false;
        video.volume = 1.0;
        video.play().catch(e => console.log("播放失败:", e));
        playBtn.style.display = 'none';
    }

    // 1. 点击播放按钮
    playBtn.addEventListener('click', startVideo);

    // 2. 点击视频本身切换暂停/播放
    video.addEventListener('click', function () {
        if (!video.paused) {
            video.pause();
            playBtn.style.display = 'block';
        } else {
            startVideo();
        }
    });

    // 3. 检测视野（续播/暂停）
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 只有手动点过播放，回到视野才自动续播
                if (hasStartedPlaying) {
                    video.play();
                    playBtn.style.display = 'none';
                }
            } else {
                // 只有正在播放时，离开视野才暂停
                if (hasStartedPlaying && !video.paused) {
                    video.pause();
                    playBtn.style.display = 'block';
                }
            }
        });
    }, { threshold: 0.1 });

    observer.observe(video);
});
</script>

由此便解决了视频在很多浏览器上出现BUG的问题。