yy日韩无码,富婆的诱惑,国产菊爆视频在线观看,国产精品无码AV高清波波AV,国产成人啪精品视频站午夜,已满十八岁免费观看电视剧十八岁,中文字幕av久久人妻蜜桃臀

問題來源：網(wǎng)頁中的視頻在安卓，鴻蒙下都正常，在蘋果的微信瀏覽器，蘋果自帶的safari瀏覽器都正常，就是蘋果的百度瀏覽器，一打開網(wǎng)站首頁，還在頂部幻燈片的時候，網(wǎng)頁底部的視頻就開始彈出來個窗口出來播放了，而且置于最頂端。

為什么只有蘋果的百度瀏覽器會這樣？

蘋果端的百度瀏覽器（以及部分舊版 UC、QQ 瀏覽器）在解析網(wǎng)頁時，會強(qiáng)行使用它自己魔改過的內(nèi)置播放器。當(dāng)它的 IntersectionObserver 產(chǎn)生首屏誤判，或者它檢測到網(wǎng)頁里有一個 <video> 標(biāo)簽時，它的內(nèi)核為了所謂的“用戶體驗”，會強(qiáng)行把視頻剝離出網(wǎng)頁，單獨(dú)彈出一個懸浮窗口置頂播放。這就把你的網(wǎng)頁布局徹底搞亂了。

既然如此，所以我們就一開始不要讓百度瀏覽器檢測到網(wǎng)頁中的VIDEO, 所以在寫VIDEO標(biāo)簽的時候，不要將視頻寫入SRC中，要不然他就檢測到了視頻，寫在data-src中。然后再寫一個按鈕，點(diǎn)擊播放視頻。

參考代碼如下：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：一開始是不加載視頻的，等點(diǎn)擊播放按鈕之后再加載視頻，將data-src中的視頻放到src中，從而播放視頻。

2：網(wǎng)頁往上滑或者往下滑的時候，離開視窗，視頻則暫停播放。

3：回到視窗之后，視頻恢復(fù)播放。

4：第2和第3的邏輯必須在第一次點(diǎn)擊之后才執(zhí)行，否則如果一直沒有點(diǎn)擊播放視頻，上滑下滑依舊會播放視頻。

5：在視頻播放的時候，再次點(diǎn)擊頁面，暫停播放。

以上便是下面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. 點(diǎn)擊播放按鈕
    playBtn.addEventListener('click', startVideo);

    // 2. 點(diǎn)擊視頻本身切換暫停/播放
    video.addEventListener('click', function () {
        if (!video.paused) {
            video.pause();
            playBtn.style.display = 'block';
        } else {
            startVideo();
        }
    });

    // 3. 檢測視野（續(xù)播/暫停）
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // 只有手動點(diǎn)過播放，回到視野才自動續(xù)播
                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>

由此便解決了視頻在很多瀏覽器上出現(xiàn)BUG的問題。