用户滚动时播放多个视频

Question

当我滚动到视口时，我使用以下脚本播放视频，当用户滚动视频时，它停止播放。问题是它只会播放一个视频，如果我为不同的源视频添加相同的html，则会出现一个空白屏幕。任何帮助将不胜感激。这是我的代码;

    <script type='text/javascript' src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
    <style type='text/css'></style>
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    var s = skrollr.init({
        render: function(data) {
            var $seventh = $("#seventh");

            var $video = $("#video");
            var videoElem = $video[0];

            var videoTop = $video.offset().top;
            var videoBottom = videoTop + $video.height();

            var viewTop = $(window).scrollTop();
            var viewBottom = viewTop + $(window).height();

            //play video when opacity is at least 50% and at least some of the video player is show
            var isViewable = $seventh.css("opacity") > 0.5 && (videoTop < viewBottom && videoBottom > viewTop);
            if(isViewable) {
                if(videoElem.paused) {
                    videoElem.play();
                    console.log("play");
                }
            }
            else {
                if(!videoElem.paused) {
                    videoElem.pause();
                    console.log("pause");
                }
            }
        }
    });
    s.setScrollTop(500);
});//]]>  

谢谢！