微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery-自动滚动播放HTML5视频如果点击了视频,请不要滚动播放

如何解决jQuery-自动滚动播放HTML5视频如果点击了视频,请不要滚动播放

我正在尝试建立一个jquery脚本,当它滚动到视图中时会在页面上播放视频,而在滚动时会暂停。目前有效! (附件的代码是在网上找到的)

问题在于,如果用户暂停视频并滚动一点,视频将再次启动。 有没有一种方法可以将检查视频是否曾经被点击的选项添加到当前代码中?在这种情况下,不会自动播放。

这是我当前的代码

$(document).ready(function() {
     var media = $('video').not("[autoplay='autoplay']");
     var tolerancePixel = 40;
     function checkMedia(){
      var scrollTop = $(window).scrollTop() + tolerancePixel;
      var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel;
      media.each(function(index,el) {
       var yTopMedia = $(this).offset().top;
       var yBottomMedia = $(this).height() + yTopMedia;
       if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ 
        $(this).get(0).play();
        } else {
           $(this).get(0).pause();
           }
       });
      }
     $(document).on('scroll',checkMedia);
    });

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。