根据窗口位置播放粘性HTML视频

如何解决根据窗口位置播放粘性HTML视频

所以我的页面上有2列。在左栏中，我有3个段落。在右列中，我在一个粘性容器中有3个视频。

当用户滚动时，我的粘性容器将保持静止，但是它应根据用户正在阅读的段落播放不同的视频。

我正在尝试改编this answer，但没有用。

HTML

    <div class="wrapper">
        <div class="illustration">
            <div class="gif-container">
                <video class="gif" id="gif2" src="/GIF3.mp4" muted="muted"></video>
                <video class="gif" id="gif2" src="/GIF2.mp4" muted="muted"></video>
                <video class="gif" id="gif1" src="/GIF1.mp4" muted="muted"></video>
            </div>
        </div>

        <div class="content">
            <h1>Paragraph 1</h1>
            <p class="par" id="par1">Lorem ipsum dolor sit amet.</p>
            <h1>Paragraph 2</h1>
            <p class="par" id="par2">Lorem ipsum dolor sit amet.</p>
            <h1>Paragraph 3</h1>
            <p class="par" id="par3">Lorem ipsum dolor sit amet.</p>
        </div>
    </div>

JS

jQuery(document).ready(function($){

function checkPos(){

    let p = $('p');
    let media = $('video');
    let offset = 40;

    let windowBottom = $(window).scrollTop() + $(window).height() + offset;

    p.each(function(index) {
        let parTop = $(this).offset().top;

        if ( windowBottom > parTop ) {
            media.get(index).play();
        }
    });
}

$(document).on('scroll',checkPos);

});

该错误来自使用.each()的索引来选择和播放相关视频。我收到以下错误：Uncaught TypeError: Cannot read property 'play' of undefined。 但是，index是一个数字，当我手动输入索引（0、1或2）时，我的代码有效。

我做错了什么？

解决方法

对于感兴趣的人，修复实际上非常简单：

jQuery(document).ready(function($){


function checkPos(){

    let p = $('p');
    let media = $('video');
    let offset = 40;

    let windowBottom = $(window).scrollTop() + $(window).height() - offset;

    p.each(function(index) {
        let parTop = $(this).offset().top;
        // Create a new variable for index
        let i = index;

        if ( windowBottom > parTop ) {
            media.get(i).play();
        }
    });
}

$(document).on('scroll',checkPos);

});