本文介绍了YouTube滚动显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试让YouTube视频在用户滚动时自动播放，并在用户滚动过去时停止播放.多亏了这篇文章" Jquery在滚动上自动播放Youtube视频"，该方法效果很好.现在，我也想使用window.scroll来执行此操作，但是它失败了.在我看来，包含更新的iframe标签的div尚未加载youtube APIIframe.任何人都知道为什么.真的感谢您的帮助?
I'm attempting to have a YouTube video auto-play when the user scrolls to it and stops when the user scrolls past it. This works fine thanks to this post "JQuery Autoplaying Youtube videos on scroll". Now I want to also do this with window.scroll but it fails. It seems to me that the div containing updated iframe tag is not loaded with youtube APIIframe ready. any one know why. Really appreciate your help?.
下面是我的代码
<style type="text/css">
iframe {
width: 200px;
height: 200px;
margin: 10px 10px 100px 10px;
}
</style>
<div id="wrap" class="content" style="border:groove">
<iframe style="margin-top:200px" id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/>
<iframe style="margin-bottom:200px" id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<div style="height:800px"></div>
</div>
<script type='text/javascript'>//<![CDATA[
function my_first(){
var LoadVideo = function(player_id){
var Program = {
Init: function(){
this.NewPlayer();
this.EventHandler();
},
NewPlayer: function(){
var _this = this;
this.Player = new YT.Player(player_id,{});
_this.Player.$element = $('#' + player_id);
},
Play: function(){
if( this.Player.getPlayerState() === 1 ) return;
this.Player.playVideo();
},
Pause: function(){
if( this.Player.getPlayerState() === 2 ) return;
this.Player.pauseVideo();
},
ScrollControl: function(){
//alert('player='+player_id);
//alert('total='+Utils.IsElementInViewport(this.Player.$element[0]) );
if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
else this.Pause();
},
EventHandler: function(){
var _this = this;
$(window).on('scroll', function(){//alert(player_id)
_this.ScrollControl();
});
}
};
var Utils = {
IsElementInViewport: function(el){
if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
return (
rect.top >= 100 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.bottom <= 400 &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
};
return Program.Init();
};
$('iframe').each(function(){
LoadVideo($(this).attr('id'));
});
}
function yHandler(){
var wrap=document.getElementById('wrap') ;
var contentHeight = wrap.offsetHeight;//get page content height
var yOffset = window.pageYOffset;//get vertical scroll position
var y = yOffset+ window.innerHeight;
if(y >= contentHeight) {//alert(1234)
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
}
}
window.onscroll = function () {
$.getScript('//www.youtube.com/player_api');
yHandler();
my_first();
}
推荐答案
应该使用append而不是innerHTML.
原始
wrap.innerHTML += '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>';
$(wrap).append( '<div class="newData"><iframe style="margin-top:0px" id="playerD" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerE" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><iframe style="margin-top:0px" id="playerF" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe><br/><div style="height:500px"></div></div>' );
希望有帮助
更新
创建具有不同ID的iframe
create iframe with different id
function createVideo( $element, url ) {
$element.append( '<iframe style="margin-top:0px" id="player' + $( 'iframe' ).length + 1 + '" frameborder="0" title="YouTube video player" type="text/html" src="' + url + '"></iframe><br/>');
}
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
createVideo( $(wrap), "https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" );
$(wrap).append( '<div style="height:500px"></div>');
这篇关于YouTube滚动显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！