我正在使用一个能够播放背景全 Angular youtube 视频的 javascript 插件:
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
<script>
var vids = ["list of videos"
]; // create your list of youtube videos
var currVid = vids[Math.floor(Math.random()*(vids.length-1))]; // this will grab a random video from the array.
var opts = { // keep all the options in an object
videoURL: currVid, // set the video to display
containment:'.video-section',
quality:'large',
autoPlay:true,
mute:true,
opacity:1
}
$(document).ready(function(){
document.getElementById("bgndVideo").dataset.property = JSON.stringify(opts); // change to this
$(".player").mb_YTPlayer(); // play!
});
</script>
当我在网站上向下滚动并在视口(viewport)中恢复时,如何让它暂停?
谢谢。
最佳答案
我建议添加 scroll
容器的事件监听器(在您的情况下可能是 window
对象,然后在每次滚动时尝试计算视频是否在可见视口(viewport)中。这里有一些有用的代码:
$(window).on("scroll", function() {
var viewportTop = window.scrollY;
var viewportBottom = viewportTop + window.outerHeight;
var isVideoBelowViewport = $(".player").offset().top > viewportBottom;
var isVideoAboveViewport = $(".player").offset().bottom < viewportTop;
var isVideoOutsideViewport = isVideoBelowViewport || isVideoAboveViewport;
if ( isVideoOutsideViewport && isVideoPlaying() ) pauseVideo();
if ( !isVideoOutsideViewport && !isVideoPlaying() ) resumeVideo();
});
我会留给你写
isVideoPlaying()
, resumeVideo()
和 pauseVideo()
.
关于javascript - 看不见时暂停/恢复 Youtube 视频(滚动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46354668/