【JS】实现Video页面自动有声播放

admin

$(function () {
    var myVideo = $("video")[0];
    var isScrolling = false;

    function throttle(func, delay) {
        return function () {
            if (!isScrolling) {
                func();
                isScrolling = true;
                setTimeout(function () {
                    isScrolling = false;
                }, delay);
            }
        };
    }

    function VideoPlay() {
        myVideo.play().catch(error => {
            return;//程序员的倔强，阻止浏览器调试错误。
        });
        var wt = $(window).scrollTop();
        var vt = $("video").offset().top;
        var vh = $("video").height();
        vt = vt - vh;
        var vb = vt + vh;
        if (wt < vt || wt > vb) {
            myVideo.requestPictureInPicture().catch(error => {
                return;//截获错误，防止浏览器调试一堆错误显示
            });
        } else {
            document.exitPictureInPicture().catch(error => {
                return;
            });
        }
    }
    //用scroll代替人工互动。
    $(window).on("scroll", throttle(VideoPlay, 300));
});