Question

我希望在iframe进入视口时开始播放YouTube视频。

jQuery(document).ready(function() {
    var inner = jQuery("#auto-video iframe");
    var elementPosTop = inner.position().top;
    var viewportHeight = jQuery(window).height();
   jQuery(window).on('scroll', function() {
        var scrollPos = jQuery(window).scrollTop();
        var elementFromTop = elementPosTop - scrollPos;

        if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
            inner.get(0).play();
        } else {
           inner.get(0).pause();
        }
    });

这会在控制台中返回“播放不是函数”消息。

修改

<div id="auto-video">
   <iframe width="450" height="253" src="https://www.youtube.com/embed/wCdl3nGPDgE?rel=0&controls=0&showinfo=0&autoplay=0" frameborder="0" allowfullscreen></iframe>

</div>

Answer 1

即使这是一个旧线程，我还是找到了一个解决方案，并认为我会在可能对任何人有用的情况下发布它。

使用以下代码，当用户滚动到您的元素时，它将播放嵌入的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视频

1 个答案: