Авто воспроизведения видео Flowplayer когда видео в окне просмотра

Question

Есть ли известный способ автоматического воспроизведения видео, когда видео в окне просмотра, я использую следующую функцию, чтобы определить, когда элемент находится в видовом

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>

Я попробовал несколько образцов, как описано в https://flowplayer.org/docs/api.html и это не кажется, работает для меня

Answer 1

Вы может использовать flowplayer(0).play(), чтобы воспроизвести представление.
Что касается «когда он в поле зрения» - вы можете 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" /> 
 
\t <source src="http://clips.vorwaerts-gmbh.de/VfE.webm"  type="video/webm" /> 
 
\t <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

Добавлена ​​переменное, чтобы проверить, если мы уже играли в видео, чтобы убедиться, что мы не будет играть дважды (после того, как пользователь сделал паузу это или видео уже закончилось).

Answer 2

Я сделал небольшие изменения в предыдущем ответе. Теперь этот код перебирает все элементы flowplayer на той же странице. Каждое видео на странице запускается автоматически. Я также добавил событие паузы, поэтому на время воспроизведения должно быть только одно видео, если оно не расположено рядом на странице.

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