要素がビューポートで表示されるときにhtmlビデオを自動的に再生

Question

実際には、これを私の指を壊した後、一種のWikiにしたいだけです。

1. ビューポート内でビデオを自動的に開始する方法。
2. 最も重要なのはワードプレス対応のソリューション PURE 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();