Auto Play Flowplayer Video When Video In Viewport

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(e

Solution 1:

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)");
  } elseif( windowScrollTop > bottomOfElement && windowScrollTop > topOfElement) {
    // Element is hidden (above viewable area)console.log("Element is hidden (above viewable area)");
  } elseif( scrollTopPosition < topOfElement && scrollTopPosition < bottomOfElement) {
    // Element is hidden (below viewable area)console.log("Element is hidden (below viewable area)");
  } elseif( scrollTopPosition < bottomOfElement && scrollTopPosition > topOfElement) {
    // Element is partially visible (below viewable area)console.log("Element is partially visible (below viewable area)");
  } else {
    // Element is completely visibleconsole.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;
    }
  }
});

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="//releases.flowplayer.org/6.0.5/flowplayer.min.js"></script><linkhref="//releases.flowplayer.org/6.0.5/skin/functional.css"><divstyle="border: 1px solid red; width: 100px; height: 800px;">
  some long div...
</div><divclass="flowplayer"data-swf="http://releases.flowplayer.org/6.0.5/commercial/flowplayer.swf"style="width: 400px;"><video><sourcesrc="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"type="video/mp4"  /><sourcesrc="http://clips.vorwaerts-gmbh.de/VfE.webm"type="video/webm" /><sourcesrc="http://clips.vorwaerts-gmbh.de/VfE.ogv"type="video/ogg"  /></video></div><divstyle="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).

Solution 2:

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) {

    } elseif (windowScrollTop > bottomOfElement && windowScrollTop > topOfElement) {

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

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

    } else {

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