如何在滾動到視圖時啓動MediaElementPlayer？

所以我想知道是否可以讓我的網站上的視頻開始播放時，用戶滾動到它的視圖。我已經嘗試了很多東西，比如我在這個網站上發現的一些其他代碼，但沒有一個能起作用，我總是得到相同的結果：網站完全混亂，圖片移出視線，部分更改位置或消失，這不是很有趣。如何在滾動到視圖時啓動MediaElementPlayer？

這是我們MediaElementPlayer當前JS代碼：

if ($('.video-promo').length) { 
    var player_promo = new MediaElementPlayer('.video-promo', { 
     videoWidth: '100%', 
     videoHeight: '100%', 
     loop: false, 
     alwaysShowControls: true, 
     features: [], 
    }); 

    player_promo.play(); 
}

和HTML：

 <section class="promo motions"> 
     <video class="video-promo"> 
       <source type="video/mp4" src="assets/video/demo.mp4" /> 
     </video> 
     <div class="video-overlay"></div> 
    </section>

乾杯任何幫助！：d

來源

2014-02-18 Aria Roberts

請你張貼一些小提琴，以幫助您更快？ – xhallix

退房丹對答案： How to tell if a DOM element is visible in the current viewport?

總之你可以添加：

function isElementInViewport (el) { 
    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
} 

function elementVisibilityMayChange() { 
    return function() { 
     if (isElementInViewport($('.video-promo')[0])) { 
      player_promo.play(); 
     } 
    } 
} 

var handler = elementVisibilityMayChange(); 

$(window).on('DOMContentLoaded load resize scroll', handler);

來源

2014-02-18 08:42:57 Sgoldy

乾杯！我應該在哪裏添加這個？ –

與視頻播放器在頁面上的任何位置都可以。 – Sgoldy

我的確如此，但它仍然搞砸了頁面。例如：http://i.imgur.com/dDdMIjz.png＆http://i.imgur.com/xkpRB5M.png（這是視頻 - 它通常佔用整個區域。我會展示更多，但我真的不想展示我未完成的網站太多：3 –

如何在滾動到視圖時啓動MediaElementPlayer？

回答

相關問題