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

尝试使用 loadstart 事件侦听器，或使用 window onload 事件。对于所有视频元素事件，请参阅 http://www.w3.org/2010/05/video/mediaevents.html

Answer 2

您可以向 window "scroll" 事件添加事件侦听器。在那里，您可以通过将 _video 元素传递给 isScrolledIntoView 函数来检查它是否为 "in view"。如果是，播放 () _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>

HTML5 视频运行完全可见

HTML5 Video run when completely visible

html

javascript

html5-video

HTML5 视频 运行 完全可见

HTML5 Video run when completely visible

html

javascript

html5-video

HTML5 视频运行完全可见