Question

当用户使用多个YouTube视频滚动页面时（如在Twitter和Facebook上），如何自动播放YouTube视频。滚动到视频时 - 自动播放YouTube视频。

Answer 1

这是你必须做的。

要制作嵌入式视频自动播放，请将“＆amp; 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。

Answer 2

https://github.com/olssonandreas/youtubeautoplay

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

Answer 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");
}

当页面滚动时，Youtube api视频自动播放

3 个答案: