Javascript HTML5视频在完全可见时运行

两个DIV将是页面内容

当视频显示时，执行自动

var boom=功能E{ e、 target.play； }; var_video=document.querySelector'video'； _video.addEventListener'？？？'，boom，false； div{ 背景：银； 宽度：100%； 高度：100vh； } 录像带{ 利润率：15px； 宽度：500px； } 您的浏览器不支持HTML5视频。

---

尝试使用loadstart事件侦听器，或使用window onload事件。有关所有视频元素事件，请参见。您可以将事件侦听器添加到窗口滚动事件中。在那里，您可以通过将_视频元素传递给isScrolledIntoView函数来检查它是否在视图中。如果是，播放视频，否则暂停

JS

HTML

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

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