Question

两个DIV将是页面内容

视频出现时自动执行

＆＃13;

var boom = function(e) {
  e.target.play();
};

var _video = document.querySelector('video');
_video.addEventListener('???', boom, false);

＆＃13;

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

＆＃13;

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

＆＃13;

使用EventListener，在代码中更改'???'

活性
焦点（不适用）

不要工作

Answer 1

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

Answer 2

您可以向窗口添加事件监听器＆＃34;滚动＆＃34;事件。在那里你可以检查_video元素是否是＆＃34;在视图＆＃34;通过将其传递给isScrolledIntoView函数。如果是，播放（）_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视频在完全可见时运行

2 个答案: