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/）所示。

基本思想是仅添加具有data属性和图像的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自动播放无法在移动设备上运行，用户必须单击两次才能执行同一操作，这在用户体验方面是无法接受的。因此，我的想法是在IFrame加载后立即触发一次点击（用户已经点击）。有可能实现这一目标吗？

Answer 1

我不确定在back元素是iframe时是否可以使用，但是您可以尝试使用css pointer-events: none属性。

将图片放置在iframe上，单击应遍历图片，然后在iframe上直接触发，然后您可以收听一些youtube回调以删除图片。

因此，iframe从一开始就会存在，但是会被图片覆盖，而不是在点击图片后将其插入。

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

是否有可能在移动设备上的IFrame中强制播放视频（例如Youtube）？

1 个答案: