ユーザーがビデオをhtml5で再生するには、どうすればいいですか？

Question

私はWebページを作成していますし、私はそこのMP4ビデオを持っている：私もJSコードの一部を書いた

<video class="video--app" id="myVideo" autoplay="" muted="" preload="auto"> 
    <source src="./img/video.mp4" type="video/mp4"> 
</video> 

：

setTimeout(function(){ 
      document.getElementById("myVideo").play(); 
     }, 1500); 

をしているが、ほとんどOK作品、映像は後に再生を開始1.5秒。しかし、私はそれを変更し、最初に画面に表示されたときにビデオを再生したいと思っています。それを達成するために私のJSコードをどのように変更すべきですか？ ありがとう！

Answer 1

This answer要素が表示されているかどうかをチェックするための機能を持っています

function isScrolledIntoView(el) { 
    var elemTop = el.getBoundingClientRect().top; 
    var elemBottom = el.getBoundingClientRect().bottom; 

    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight); 
    return isVisible; 
} 

したがって、ユーザーがスクロールした後、あなたがビデオをかどうかを確認でき表示されている場合は開始してください：

var videoEl = document.getElementById("myVideo"); 
var videoWasStarted = false; 

window.addEventListener('scroll', function(e) { 
    if (isScrolledIntoView(videoEl) && !videoWasStarted) { 
    videoWasStarted = true; 
    videoEl.play(); 
    } 
}); 

Answer 2

あなたの人生を楽にするためにjQueryを含めることができます。 私の提案は、このポストから構成されている：check-if-element-is-visible-on-screen

function isOnScreen(element) 
{ 
    var curPos = element.offset(); 
    var curTop = curPos.top; 
    var screenHeight = $(window).height(); 
    return (curTop > screenHeight) ? false : true; 
} 
if(isOnScreen($('#myVideo'))) { $('#myVideo').play();}; 

Answer 3

使いやすさのためにJqueryを使用してください。スクロール機能を使用すると、ユーザーがビデオにスクロールすると、ビデオが再生されます。

$(window).scroll(function(){ 
    var wScroll = $(this).scrollTop(); 
    if(wScroll > $('#myVideo').offset().top - ($(window).height()/1.2)) { 
     $('#myVideo').get(0).play() 
    } 
}); 

は、あなたのHTML

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>