Javascript 当in元素在视口中可见时自动播放html视频

事实上，我只是想把它作为一种维基，在我的手指被这个打断之后

如何在视口中自动启动视频

最重要的是：Wordpress兼容解决方案纯JavaScript。没有JQuery。为什么？因为像我这样的新手很难在wordpress中“搜索”图书馆。。。即使只是接收滚动事件也很难

---

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

所以-一个简单、最短的解决方案是在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();

var-video=null；
var=false；
函数checkScroll（）
{
如果（视频==null）
返回；
var rect=video.getBoundingClientRect（）；
//console.log（rect.top、rect.bottom、window.innerHeight、document.documentElement.clientHeight）；
var inViewPort=Math.abs（rect.top）