如何在滚动时在网页中播放和暂停 Youtube 视频(使用 javascript 或 jquery)? [英] How to play and pause a Youtube video in a webpage while scrolling(using javascript or jquery)?
问题描述
我的意思是说当页面加载时视频不应该播放.它应该在视频播放器进入窗口屏幕的焦点时播放，并且在使用滚动功能在屏幕上不可见时应该暂停.我不希望在单独的标签上播放视频.
<头><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><身体><p>这是一些文字</p><div style="margin-top:1000px;margin-bottom:1000px;"><iframe width="445" height="245" src="https://www.youtube.com/embed/LA5XtlyVILo?rel=0&enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe><script type="text/javascript">var 视频 = document.getElementsByTagName("iframe"), 分数 = 0.8;函数 checkScroll() {for(var i = 0; i 此问题的正确代码. <头><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//www.youtube.com/player_api"></script><身体><p>这是一些文字</p><div style="margin-top:1000px;margin-bottom:1000px;">
<div id="玩家"></div><script type="text/javascript">src="//www.youtube.com/player_api"var 播放器；函数 onYouTubeIframeAPIReady() {player = new YT.Player('玩家', {高度:'245'，宽度:'445'，videoId: 'FSfz0NxzN80',rel:'0'});}var 视频 = document.getElementsByTagName("iframe"), 分数 = 0.8;函数 checkScroll() {for(var i = 0; i I mean to say that the video should not be playing when the page is loaded.
It should play when the video player comes in the focus of the window screen and it should pause when it is not visible on the screen using the scroll function.
I am not expecting to play videos on separate tabs.
Correct Code for this question.
这篇关于如何在滚动时在网页中播放和暂停 Youtube 视频(使用 javascript 或 jquery)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<p>
This is some text
</p>
<div style="margin-top:1000px;margin-bottom:1000px;">
<iframe width="445" height="245" src="https://www.youtube.com/embed/LA5XtlyVILo?rel=0&enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.width,
h = video.height,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + parseInt(w);
b = y + parseInt(h);
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
playVideo();
} else if(visible < fraction) {
pauseVideo();
}
}
};
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
</script>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.youtube.com/player_api"></script>
</head>
<body>
<p>
This is some text
</p>
<div style="margin-top:1000px;margin-bottom:1000px;">
</div>
<div id="player"></div>
<script type="text/javascript">
src="//www.youtube.com/player_api"
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '245',
width: '445',
videoId: 'FSfz0NxzN80',
rel:'0'
});
}
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.width,
h = video.height,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + parseInt(w);
b = y + parseInt(h);
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
player.playVideo();
}
else if(visible < fraction) {
player.pauseVideo();
}
}
};
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
</script>
</body>
</html>
