Question

我正在创建一个网页，我在那里有一个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代码来实现这一目标？谢谢！

Answer 1

This answer具有检查元素是否在视图中的功能：

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();
  }
});

Answer 2

使用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>

Answer 3

你可以包含jQuery，让你的生活更轻松。我的建议改编自这篇文章：check-if-element-is-visible-on-screen

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();};

当用户滚动到html5时，如何开始在html5中播放视频？

3 个答案: