javascript - HTML5 视频在完全可见时运行

Question

这两个DIV将是页面内容

当视频出现时自动执行

var boom = function(e) {
  e.target.play();
};

var _video = document.querySelector('video');
_video.addEventListener('???', boom, false);

div {
  background: silver;
  width: 100%;
  height: 100vh;
}
video {
  margin: 15px;
  width: 500px;
}

<div></div>
<video>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div></div>

使用EventListener，改变代码中的'???'

• 活跃

• 焦点(不适用)

不工作

Answer 1

您可以向窗口“滚动”事件添加事件监听器。在那里，您可以通过将 _video 元素传递给 isScrolledIntoView 函数来检查它是否“在 View 中”。如果是，则 play() _video，否则暂停()。 Example here.

JS

var _video = document.querySelector('video');

function isScrolledIntoView( element ) {
    var elementTop    = element.getBoundingClientRect().top,
        elementBottom = element.getBoundingClientRect().bottom;

    return elementTop >= 0 && elementBottom <= window.innerHeight;
}

window.addEventListener("scroll", function(){
  if (isScrolledIntoView(_video)) {
    _video.play();
  }
  else {
    _video.pause()
  }
})

HTML

<div></div>
<video>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
<div></div>