JQuery Autoplaying Youtube视频滚动 [英] JQuery Autoplaying Youtube videos on scroll
问题描述
问题：我试图在用户滚动时自动播放YouTube视频，并在用户滚动时停止播放。
约束：JavaScript Web开发新手。
Constraints: New to JavaScript web development.
尝试：关闭 https://jsfiddle.net/kmsdev/gsfkL6xL/ 我复制粘贴线以使其正常工作。我熟悉C ++和Java，所以我至少可以阅读代码的要点。似乎我的代码是正确的，但我可能没有在我的HTML5中正确调用它？
Tried: Going off of https://jsfiddle.net/kmsdev/gsfkL6xL/ I copy pasted line for line just to get it to work. I'm familiar with C++ and Java so I can at least read the main points of the code. It seems that I have the code correct but I might not be calling it correctly within my HTML5?
Hero部分：
<section class="video_background">
<div class="video_foreground">
<iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
</div>
</section>
JS部分：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/scroll.js"></script>
JS：
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
我有 https://jsfiddle.net/kmsdev/gsfkL6xL/ 但这应该不重要。
I have this on top of https://jsfiddle.net/kmsdev/gsfkL6xL/ but that shouldn't matter.
推荐答案
这是一个工作示例，其中包括所有css / js。我看不到你对你的PlayYTVideos源版本做了什么，但你可能忘了做window.onload。
Here is a working example, this includes all css/js in one. I can't see what you did with your version of the PlayYTVideos source but you may have forgotten to do window.onload.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<style type="text/css">
iframe {
width: 200px;
height: 200px;
margin: 500px 0;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
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(){
if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
else this.Pause();
},
EventHandler: function(){
var _this = this;
$(window).on('scroll', function(){
_this.ScrollControl();
});
}
};
var Utils = {
/** @author http://stackoverflow.com/a/7557433/1684970 */
IsElementInViewport: function(el){
if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
};
return Program.Init();
};
LoadVideo('playerA');
LoadVideo('playerB');
LoadVideo('playerC');
}//]]>
</script>
</head>
<body>
<iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<iframe id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
</body>
</html>
这篇关于JQuery Autoplaying Youtube视频滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
