Question

我需要使用YouTube iframe api在我的页面上嵌入一些视频。

在我的代码中，当用户点击“添加视频”按钮时，我需要添加iframe的仲裁编号。

由于技术原因（在我的真实应用程序代码中），我需要使用innerHTML属性添加此代码。

我知道更改innerHTML会导致出现黑色短暂延迟，因为您可以看到按实时示例中的“添加视频”按钮几次。

我想知道是否有办法在不改变innerHTML的使用的情况下最小化黑色短暂延迟。

现场演示 https://jsbin.com/kififenequ/edit?html,output

(function (window) {
    document.addEventListener('DOMContentLoaded', event => {
        let html = '<iframe width="640" height="360" src="https://www.youtube.com/embed/jm0lzLHxauY?rel=0&amp;controls=0" frameborder="0" allowfullscreen></iframe>';

        let fragmentFromString = function (strHTML) {
            return document.createRange().createContextualFragment(strHTML);
        }

        let elmVideos = document.getElementById('videos');
        let elmBtnInsert = document.getElementById('btn-insert');

        elmBtnInsert.addEventListener('click', event => {
            elmVideos.innerHTML += html; // I CANNOT CHANGE THIS
        });
    });
})(window);

Answer 1

innerHTML不是黑色闪烁的原因。您甚至可以在浏览器中直接打开iframe网址时看到它：https://www.youtube.com/embed/jm0lzLHxauY?rel=0&controls=0

预览图片只需要一些时间来加载，你为什么这么烦恼呢？你可以做的是添加iframe不可见，等待iframe的load事件，然后显示它。但是我觉得没有什么比黑色闪烁还要糟糕。（此外，根据YouTube播放器加载图片的方式，我无法保证这会有效，我没有考虑到这一点）

Youtube嵌入iframe显示黑色iframe片刻

1 个答案: