Question

我已经扫描过以前的问题，似乎无法找到任何关于在页面中添加YouTube视频并让其自动播放而不会影响页面加载速度的信息。反正是否允许页面的全部内容在没有视频创建瓶颈的情况下继续加载？

Answer 1

这取决于设备和浏览器，但在笔记本电脑上，使用HTML5视频机制，当视频在大多数操作系统和浏览器上启动时，您的页面将继续加载，而无需进行任何复杂的排序。

视频是流式传输的，实际上这意味着一次只能请求小块，因此没有延迟等待完整的视频下载。大多数浏览器将以不干扰页面下载和显示的其余部分的方式实现此回放 - 例如在一个单独的线程中，甚至有时主要在设备HW本身。

在移动设备上，情况有所不同 - 许多移动设备根本不允许自动播放。他们实施此限制保护用户不会对移动数据计划产生过多费用。

许多移动设备也会强制视频在播放时全屏播放 - 这往往是逐个设备的。例如，iPhone可以全屏播放视频，但更大的iPad将允许它在网页中内嵌（这是一个不断变化的游戏领域，因此如果您对特定设备感兴趣，则值得检查最新版本的状态。）

Answer 2

在网上搜索我遇到了一些javascript，并修改了YouTube嵌入代码帮助。

<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/ihhAswAsg8c?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>

注意src =“”是如何为空，而url已被放入data-src =“”中。然后添加以下javascript。

$(document).ready(function() {
    function init() {
        var vidDefer = document.getElementsByTagName('iframe');
        for (var i=0; i<vidDefer.length; i++) {
            if(vidDefer[i].getAttribute('data-src')) {
            vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
            }
        }
    }
    window.onload = init;
});

这将阻止iframe自动发出大量的http请求，直到页面的其余部分加载完毕。

自动播放YouTube视频而不会减慢页面加载时间

2 个答案: