视频在视口中时自动播放 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() 来播放视图。
至于 "when it's in view" - 你可以 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>

更新

添加了一个变量来检查我们是否已经播放了视频，以确保我们不会播放两次（在用户暂停或视频已经结束之后）。

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;       
        }
    }
});
});

视频在视口中时自动播放 flowplayer 视频

Auto play flowplayer video when video in viewport

html

jquery

flowplayer

更新