预加载 youtube 嵌入

Posted

技术标签:

【中文标题】预加载 youtube 嵌入【英文标题】:Preloading a youtube embed 【发布时间】:2011-12-26 15:47:37 【问题描述】:

我想让嵌入的 chromeless youtube 视频预加载其视频,而不在页面加载时播放。现在我正在使用一个尴尬的“播放然后快速暂停”脚本,这会导致一些小问题(半秒音频泄漏并且失败了很多)。对于这个看似简单的功能,有没有更好/更优雅的预加载方式?

【问题讨论】:

现在你可以使用plyr 和dash.js to preload it 【参考方案1】:

打电话

player.cueVideoById(videoId:String);

代替

player.loadVideoById(videoId:String);

【讨论】:

不起作用。来自官方文档:“cueVideoByID:加载指定视频的缩略图并准备播放器播放视频。播放器在调用 playVideo() 或 seekTo() 之前不会请求 FLV。”换句话说,它实际上并没有开始缓冲剪辑。 你是对的。似乎唯一的方法就是按照你的方式去做。我可以建议尝试监听事件“playerStateChanged”并查看状态是否正在播放(1)然后调用暂停。您也许可以更早地暂停它。【参考方案2】:

我有同样的问题并遇到了这个问题。经过一番研究,我想我找到了一个更简洁但相似的答案。

javascript API 调用 OnYouTubePlayerReady 时,您按下播放键并向 onStateChange 添加一个事件监听器,每次播放器从缓冲变为播放时都会调用该监听器。

例如,在函数内部,您监听状态 3,即正在缓冲,一旦调用,您就暂停视频。

您可以在this jsFiddle 中看到这种技术的实际应用。

附注:在我的示例中,我没有使用 JavaScript 框架,但您可以轻松地在此处使用。

此外,我无法使用 jsFiddle 从 html 正文中提取脚本标记,但外部 script.js 文件在我自己的服务器上运行良好。

【讨论】:

我发现状态 3 在我的高速连接上并不总是加载序列的一部分。相反,起作用的是聆听播放状态、静音和暂停。 截至 2017.11.12,当我尝试在 Chrome 中运行 JSFiddle 时,我看到 You need Flash Player version 8 or higher to view this content.【参考方案3】:

我一直在寻找解决这个问题的方法,偶然发现了这篇文章:

Embed YouTube Videos Responsively without Increasing Load Time

摘要指出:此方法会将您的网页大小减少 300-400 KB,同时使您的网站适合移动设备。

将其粘贴到页面上

<div class="youtube-container">
<div class="youtube-player" data-id="VIDEOID"></div>
</div>

javascript

<script>
(function() 
    var v = document.getElementsByClassName("youtube-player");
    for (var n = 0; n < v.length; n++) 
        var p = document.createElement("div");
        p.innerHTML = labnolThumb(v[n].dataset.id);
        p.onclick = labnolIframe;
        v[n].appendChild(p);
    
)();

function labnolThumb(id) 
    return '<img class="youtube-thumb" src="//i.ytimg.com/vi/' + id + '/hqdefault.jpg"><div class="play-button"></div>';


function labnolIframe() 
    var iframe = document.createElement("iframe");
    iframe.setAttribute("src", "//www.youtube.com/embed/" +
        this.parentNode.dataset.id + "?  autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("id", "youtube-iframe");
    this.parentNode.replaceChild(iframe, this);

</script>

CSS

<style>
.youtube-container 
    display: block;
    margin: 20px auto;
    width: 100%;
    max-width: 600px;

.youtube-player 
    display: block;
    width: 100%;
    /* assuming that the video has a 16:9 ratio */

    padding-bottom: 56.25%;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    cursor: hand;
    cursor: pointer;
    display: block;

img.youtube-thumb 
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: auto

div.play-button 
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url("http://i.imgur.com/TxzC70f.png") no-repeat;

#youtube-iframe 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

</style>

更多修改建议和改进请参考原文章cmets。

【讨论】:

我可能遗漏了一些东西,但在阅读了这篇文章后,这段代码不会在不播放的情况下预加载 YouTube 视频,因此不能回答所述问题。【参考方案4】:

如果我们看到这个:https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content

预加载 iframe 可能会有所帮助:

    <link rel="preload" href="https://www.youtube.com/embed/dQw4w9WgXcQ" as="document">

【讨论】:

以上是关于预加载 youtube 嵌入的主要内容,如果未能解决你的问题,请参考以下文章

jquery预加载的几种例子

嵌入 youtube 视频 + 对正确的网站进行反向工程时性能下降

如何在 AS3 中创建预加载器

预加载是啥意思啊,和下载的区别是啥

前端优化 之 图片预加载和懒加载

手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案