javascript - 当 in 元素在视口(viewport)中可见时自动播放 html 视频

Question

实际上，我只是想把它作为一种 Wiki，在我弄断手指之后。

1. 如何在视口(viewport)中自动启动视频。
2. 最重要的是:Wordpress 兼容解决方案纯 JavaScript。没有 JQuery。为什么？因为像我这样的新手很难将库“排队”到 WordPress 中...即使只是接收滚动事件也很困难...

无论如何，在下面发布答案:

Answer 1

所以 - 一个直接、最短的解决方案是在 html 页面上创建视频，或者在 WordPress 中使用“原始 HTML”元素:

<script type="text/javascript">

  var video = null;
  var ended = false;

  function checkScroll()
  {
    if( video == null )
      return;
    var rect = video.getBoundingClientRect();
    // console.log( rect.top, rect.bottom, window.innerHeight, document.documentElement.clientHeight );
    var inViewPort = Math.abs( rect.top ) < window.innerHeight;
    if( inViewPort )
    {
      if( video.paused && ( ended == false ) )
      {
        video.play();
        video.addEventListener( 'ended', myHandler, false );
        function myHandler(e)
        {
          ended = true;
        }
      }
    }
    else
    {
      video.currentTime = 0;
      ended = false;
    }
  }

  window.onload = function()
  {
    video = document.getElementById( 'rubi-second-video' );
    window.onscroll = function()
    {
      checkScroll();
    }
  }

  checkScroll();