问题
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
回答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)");
} 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).
回答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) {
} 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;
}
}
});
});
来源:https://stackoverflow.com/questions/38441231/auto-play-flowplayer-video-when-video-in-viewport