how can I start playing my video in html5 when user scrolls to it?

Question

I'm creating a webpage and I have a mp4 video there:

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

I also wrote a part of JS code:

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

and that works almost ok, the video starts playing after 1,5 second. But I would like to change it and start playing video when it first appears on the screen - basically when user scrolls to it. Can you give me any hint how should I modify my JS code to achieve that? Thanks!

score 4 · Accepted Answer · edited May 23 '17 at 11:58

4

This answer has a function for checking whether an element is in view:

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

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

So after the user has scrolled, you could check if the video is in view, and if so, start it:

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

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

edited May 23 '17 at 11:58

Community

1
1

answered Jun 18 '16 at 23:15

Schlaus

15,686
10
31
62

Thanks, that almost worked for me! One more question here - is there a way of playing the video only once and then do not play it at all? – user3766930 Jun 18 '16 at 23:25
1

@user3766930 Edited my answer – Schlaus Jun 18 '16 at 23:29

score 1 · Answer 2 · edited Jun 18 '16 at 23:43

Use Jquery for easability. Use Scroll Function so that when user comes Scrolling to your Video it will trigger the video to Play.

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

Remember to add jquery library in your HTML

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

score -1 · Answer 3 · edited May 23 '17 at 12:08

-1

You could include jQuery to make life easier for you. My suggestion is adapted from this post: 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();};

edited May 23 '17 at 12:08

Community

1
1

answered Jun 18 '16 at 23:15

grateful

1,070
11
20

@Derek朕會功夫, do you agree with me or are you being sarcastic? Personally, I get tired of typing "document.getElementById" – grateful Jun 18 '16 at 23:21
@Derek朕會功夫,hahaha just saw your link - that's great! – grateful Jun 18 '16 at 23:34
1

IMO I don't think tired of typing that is a legit reason to include the entire jQuery library, especially when `document.querySelectorAll` already provides a native implementation with arguably better performance. – Derek 朕會功夫 Jun 18 '16 at 23:34
Yea it's a really funny link that I always like to share. – Derek 朕會功夫 Jun 18 '16 at 23:34

how can I start playing my video in html5 when user scrolls to it?

3 Answers3