javascript - 是否有可能强制在移动设备上的 IFrame 内播放视频(例如 Youtube)？

Question

有人讨论过，自动播放不适用于 Apple 和 Android 移动设备 ( Youtube autoplay not working on mobile devices with embedded HTML5 player )。

但是，为了不破坏我的网站性能，我仅在用户单击时加载图像并添加 IFrame，如本教程 ( https://lean.codecomputerlove.com/make-your-own-lightweight-youtube-player/ ) 所示。

基本思想是仅添加带有数据属性和图像的 HTML:

    <div class="video__youtube" data-youtube>
        <img src="https://i.ytimg.com/vi/VIDEO_ID/maxresdefault.jpg" class="video__placeholder" />
        <button class="video__button" data-youtube-button="https://www.youtube.com/embed/VIDEO_ID"></button>
    </div>

稍后，一旦用户点击，就通过 JavaScript 添加 IFrame:

function createIframe(event) {
    var url = event.target.dataset.youtubeButton;
    var youtubePlaceholder = event.target.parentNode;

    var htmlString = '<div class="video__youtube"> <iframe class="video__iframe" src="' + url + '?autoplay=1" frameborder="0" allowfullscreen></iframe></div>';

    youtubePlaceholder.style.display = 'none';
    youtubePlaceholder.insertAdjacentHTML('beforebegin', htmlString);
    youtubePlaceholder.parentNode.removeChild(youtubePlaceholder);
}

但是，由于 Youtube 自动播放无法在移动设备上运行，用户必须点击两次才能执行同一操作，这在用户体验方面是 Not Acceptable 。因此，我的想法是在 IFrame 加载后立即触发单击(因为用户已经单击了)。有可能实现这一目标吗？

Answer 1

我不确定当后面的元素是 iframe 时它是否有效，但您可以尝试 css pointer-events: none 属性。

将图像覆盖 iframe，点击应该穿过图像并直接在 iframe 上触发，然后您可以收听一些 YouTube 回调来删除图像。

因此，iframe 将从一开始就在那里，但被图像覆盖，而不是在单击图像后插入它。

https://css-tricks.com/almanac/properties/p/pointer-events/检查此示例，您单击另一个 div 前面的一个 div。