Chrome浏览器中多个JW播放器自动播放问题，警告334001和330000。

Question

我一直在尝试在一个页面上添加多个JW播放器。我的想法是让几个播放器的宽度达到100%，并且当用户滚动到视频容器时自动播放视频。视频容器的高度是16:9的宽高比。我在DOM中用一个空容器（1000px高度，红色背景）将视频容器隔开，仅供演示之用。控制台中显示的JW播放器警告代码是334001和330000。我发现这些错误是新出现的，所以还没有被记录下来。这不会是一个问题，但它停滞了播放器，并显示绿色背景而不是视频容器。我的账户是免费的（开发者）类型。

在某些（几乎是随机的）点上，Chrome 控制台显示了一个错误。

未捕获（在承诺中）DOMException。播放()请求被暂停()的调用打断。

所以我猜测 autostart 和 autoPause JW播放器设置中的属性没有达到预期的效果，也许自定义异步处理视频的暂停和播放可以解决这个问题。

1. JW播放器库v8.14.0是从这个位置"/content.jwplatform.comlibrariesIDzF9Zmk.js "下载的，并通过webpack包含在我的项目中。通过CDN导入库并没有任何区别，我的代码是："/content.jwplatform.comlibrariesIDzF9Zmk.js"。
2. 这是我的代码。

document.addEventListener('DOMContentLoaded', function() {
    videoInit();
});

function videoInit() {
    // list of video IDs
    const videos = {
        main: '6BRJEJBJ',
        sky: 'Pmi4Tef0',
        moon: 'Z3w5Ptnu',
        city: 'VHiZEW9S',
        mountains: 'LlY3I9AL',
        villa: 'WMAXC1tw',
    };

    // set thumbnail resolution
    function thumbnailResolution() {
        if (window.innerWidth < 320) {return '320'}
        if (window.innerWidth < 720) {return '720'}
        if (window.innerWidth < 1280) {return '1280'}
        return '1920';
    }

    // inject video containers to the webpage
    Object.values(videos).forEach(el => {
        let videoContainer = document.createElement("DIV");
        videoContainer.id = el;
        document.body.appendChild(videoContainer);

        let videoSeparator = document.createElement("DIV");
        videoSeparator .class = el;
        videoSeparator .style.height = '1000px';
        videoSeparator .style.backgroundColor = 'red';
        document.body.appendChild(videoSeparator );
    });

    // initialize videos
    Object.values(videos).forEach(el => {
        jwplayer(el).setup({
            file: 'https://cdn.jwplayer.com/manifests/' + el + '.m3u8',
            image: 'https://content.jwplatform.com/thumbs/' + el + '-' + thumbnailResolution() + '.jpg',
            stretching: 'fill',
            controls: 'false',
            repeat: 'true',
            mute: 'true',
            tracks: [{
                'file': 'https://cdn.jwplayer.com/strips/' + el + '-120.vtt',
                'kind': 'thumbnails',
            }],
            autostart: 'viewable',
            autoPause: {
                viewability: true,
                pauseAds: true,
            },
        });
    });
}

我尝试了不同的浏览器 1. Chrome v81.0.4044.138 (64-bit)，对单个视频有效，一旦添加多个视频，当你向上向下滚动几次时，播放器就会中断（这个动作会播放当前在浏览器窗口中可见的视频） 2.Firefox v76.0.1 (64-bit)，解决方案和预期一样 3.Edge和IE11，有效，但视频缩略图只显示一次。当你从视频容器中滚动，然后回到视频容器时，会显示黑色背景而不是缩略图。

我也试过禁用webpack HMR。

Answer 1

在不同的电脑上进行测试，即使使用相同的操作系统和浏览器版本，问题也无法重现。这个问题可能与我本地机器上的图形卡驱动程序有关。