当用户滚动到HTML5时，如何开始播放我的视频？

我正在创建一个网页，我在那里有一个mp4视频：

<video class="video--app" id="myVideo" autoplay="" muted="" preload="auto">
    <source src="./img/video.mp4" type="video/mp4">
</video>

我也写了一部分JS代码：

setTimeout(function(){
            document.getElementById("myVideo").play();
        }, 1500);

而且工作几乎可以，视频在1.5秒后开始播放。 但我想改变它，并开始播放视频时，它首次出现在屏幕上 - 基本上当用户滚动到它。 你能给我任何提示，我应该如何修改我的JS代码来实现它？ 谢谢！

---

这个答案有一个检查元素是否在视图中的函数：

function isScrolledIntoView(el) {
    var elemTop = el.getBoundingClientRect().top;
    var elemBottom = el.getBoundingClientRect().bottom;

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    return isVisible;
}

因此，在用户滚动后，您可以检查视频是否在视图中，如果是，请启动它：

var videoEl = document.getElementById("myVideo");
var videoWasStarted = false;

window.addEventListener('scroll', function(e) {
  if (isScrolledIntoView(videoEl) && !videoWasStarted) {
    videoWasStarted = true;
    videoEl.play();
  }
});

---

使用Jquery来实现易用性。 使用滚动功能，以便当用户滚动到您的视频时，它会触发视频播放。

$(window).scroll(function(){
    var wScroll = $(this).scrollTop();
    if(wScroll > $('#myVideo').offset().top - ($(window).height() / 1.2)) {
        $('#myVideo').get(0).play()
    }
});

记得在你的HTML中添加jQuery库

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

---

你可以包含jQuery来让你的生活更轻松。 我的建议是从这篇文章中改编的：如果元素是可见的，则在屏幕上查看

function isOnScreen(element)
{
    var curPos = element.offset();
    var curTop = curPos.top;
    var screenHeight = $(window).height();
    return (curTop > screenHeight) ? false : true;
}
if(isOnScreen($('#myVideo'))) { $('#myVideo').play();};

链接地址: http://www.djcxy.com/p/83611.html

上一篇: how can I start playing my video in html5 when user scrolls to it?

下一篇: How to evaluate javascript code from Behat to Selenium properly?