如何在用戶滾動到HTML5時開始播放我的視頻？

我創建一個網頁，我有沒有MP4視頻：如何在用戶滾動到HTML5時開始播放我的視頻？

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

我也寫的JS代碼的一部分：

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

和作品幾乎確定，在視頻開始播放後， 1.5秒。但我想改變它，並開始播放視頻時，它首次出現在屏幕上 - 基本上當用戶滾動到它。你能給我任何提示，我應該如何修改我的JS代碼來實現它？謝謝！

來源

2016-06-18 user3766930

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(); 
    } 
});

來源

2016-06-18 23:15:38 Schlaus

謝謝，這幾乎爲我工作！還有一個問題 - 有沒有一種播放視頻的方法，然後根本不播放視頻？ – user3766930

@ user3766930編輯我的答案 – Schlaus

-1

你可以包含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();};

來源

2016-06-18 23:15:32 grateful

[ 「* jQuery讓生活更輕鬆*」]（http://i.stack.imgur.com/ssRUr.gif） –

@德里克朕會功夫，你同意我還是你諷刺？就個人而言，我厭倦了輸入「document.getElementById」 – grateful

@Derek朕會功夫，哈哈哈只是看到了你的鏈接 - 那太棒了！ – grateful

使用Jquery的easability。使用滾動功能，以便當用戶滾動到您的視頻時，它會觸發視頻播放。

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

記住在你的HTML添加jQuery庫

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

來源

2016-06-18 23:27:55

如何在用戶滾動到HTML5時開始播放我的視頻？

回答

相關問題