页面滚动时自动播放 Youtube api 视频答案

【问题标题】：Youtube api video auto playing when page scroll页面滚动时自动播放 Youtube api 视频
【发布时间】：2015-09-18 12:58:34
【问题描述】：

当用户滚动包含多个 youtube 视频的页面时（如在 twitter 和 Facebook 上），如何自动播放 youtube 视频。滚动到视频时 - 自动播放 youtube 视频。

【问题讨论】：

@not_a_bot 我现在对这个功能一无所知。谷歌搜索没有结果。
当视频在屏幕中间时播放，如果在屏幕中间以下，则暂停

标签： youtube youtube-api

【解决方案1】：

这是你必须做的。

要使嵌入的视频自动播放，请将“&autoplay=1”添加到视频的嵌入代码中，紧跟在视频 ID（“v/”之后的一系列字母）之后。

这是一个例子：

<object height="350" width="425"><param name="movie" value="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" /><embed height="350" src="http://www.youtube.com/v/OdT9z-JjtJk&autoplay=1" type="application/x-shockwave-flash" width="425"></embed></object>

如果您想通过嵌入式视频获得更多功能，可以访问此page。

【讨论】：

但即使用户看不到视频也会自动播放。
为此，您必须编写智能代码。代码应该能够识别可见区域（如果你想让它在 Android 应用上运行，它将是 onStart()）并开始自动播放。

【解决方案2】：

https://github.com/olssonandreas/youtubeautoplay

简单的 javascript 项目，展示了如何在同一页面上自动播放多个视频。当视频在视口中时自动播放开始。

【讨论】：

【解决方案3】：

尽管这是一个旧线程，但我找到了一个解决方案，并认为我会发布它以防万一它对任何人有用。

使用下面的代码，当用户滚动到您的元素时，它将播放嵌入的 YouTube 视频。只需用滚动到视频时将播放视频的元素填写“#YourElement”。最后，提供您的 iFrame 和 ID 属性并将“#YourIFrame”更改为您所称的 iFrame ID。

$(window).scroll(function() {
 
//will trigger when your element comes into viewport
    var hT = $('#YourElement').offset().top,
    hH = $('#YourElement').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();



if (wS > (hT+hH-wH)){
    //appends &autoplay=1 to iFrame src, making it autoplay
    var videoUrl = $('#YourIFrame').attr('src');
    $('#YourIFrame').attr('src', videoUrl + "&autoplay=1");
}

【讨论】：