Auto play flowplayer video when video in viewport

Question

Is there any known way of auto playing video when video is in viewport, I use the following function to determine when an element is in viewport

var isScrolledIntoView = function(elem) {
      // get the position of the viewport
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();

  // get the position of the player element
      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();

  // determine if the player element is in fully in the viewport
      return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
        && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/functional.css">

<div class="flowplayer" data-swf="http://releases.flowplayer.org/6.0.5/commercial/flowplayer.swf">
   <video>
      <source type="video/mp4"  src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
   </video>
</div>

I tried few samples as explained at https://flowplayer.org/docs/api.html and it doesn't seems to be working for me

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

You can use flowplayer(0).play() in order to play the view.
As for "when it's in view" - you can check here.

var element         = $(".flowplayer");
var topOfElement    = element.offset().top;
var bottomOfElement = element.offset().top + element.outerHeight(true);
var videoPlayedOnce = false;

$(window).bind('scroll', function() {
  var scrollTopPosition   = $(window).scrollTop()+$(window).height();
  var windowScrollTop     = $(window).scrollTop()

  if (windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {
    // Element is partially visible (above viewable area)
    console.log("Element is partially visible (above viewable area)");
  } else if( windowScrollTop > bottomOfElement && windowScrollTop > topOfElement) {
    // Element is hidden (above viewable area)
    console.log("Element is hidden (above viewable area)");
  } else if( scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement) {
    // Element is hidden (below viewable area)
    console.log("Element is hidden (below viewable area)");
  } else if( scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement) {
    // Element is partially visible (below viewable area)
    console.log("Element is partially visible (below viewable area)");
  } else {
    // Element is completely visible
    console.log("Element is fully visible");
    if (!videoPlayedOnce) {
      console.log("Only if the video wasn't played already we need to play it");
      flowplayer(0).play()
      videoPlayedOnce = true;
    }
  }
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script>
<link rel="stylesheet" href="//releases.flowplayer.org/6.0.5/skin/functional.css">
<div style="border: 1px solid red; width: 100px; height: 800px;">
  some long div...
</div>
<div class="flowplayer" data-swf="http://releases.flowplayer.org/6.0.5/commercial/flowplayer.swf" style="width: 400px;">
   <video>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"  />
 <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"      type="video/webm" />
 <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv"       type="video/ogg"  />
   </video>
</div>
<div style="border: 1px solid blue; width: 100px; height: 800px;">
  some long div...
</div>

Update

Added a variable to check if we already played the video to make sure we don't play it twice (after the user paused it or the video ended already).

Your solution is perfect only issue I see is it keeps playing video over and again, i do understand this might be additional request but is it possible that video only start playing once ? i.e. when I scroll down video starts playing but if as a user I pause the video and scroll down and than scroll back up again it doesnt trigger the auto play again ? — June, Aug 05 '16 at 15:19
Answer updated to have that as well. Note that I saved the other options in the scroll so you can use them. If the answer is correct please accept it. Thanks! — Dekel, Aug 07 '16 at 14:06
What kind of modifications should be done to code if one page has multi "flowplayer" videos and all of them needs to be played on scroll position? — Timo77, Aug 30 '16 at 07:27
@Timo77, there are several ways to do this. What have you tried? — Dekel, Aug 30 '16 at 18:43

score 0 · Answer 2 · answered Aug 31 '16 at 06:54

I made small modifications to previous answer. Now this code loops all flowplayer clases on same page. Every video on page starts automatic. I added pause event too, so there should be only one video at the time playing if not located side by side on page.

$('.flowplayer').each(function (i, element) {
    var topOfElement = $(element).offset().top;
    var bottomOfElement = $(element).offset().top + $(element).outerHeight(true);
    var videoPlayedOnce = [];
    videoPlayedOnce[i] = false;

$(window).bind('scroll', function () {
    var scrollTopPosition = $(window).scrollTop() + $(window).height();
    var windowScrollTop = $(window).scrollTop()

    if (windowScrollTop > topOfElement && windowScrollTop < bottomOfElement) {

    } else if (windowScrollTop > bottomOfElement && windowScrollTop > topOfElement) {

        flowplayer(i).pause()
    } else if (scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement) {

        flowplayer(i).pause()
    } else if (scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement) {

    } else {

        if (!videoPlayedOnce[i]) { 
            flowplayer(i).play()
            videoPlayedOnce[i] = true;       
        }
    }
});
});

Auto play flowplayer video when video in viewport

2 Answers2

Update

Linked