更新时间:2023-10-31 16:03:34
您在 HTML5 播放器和 checkScroll()
函数方面做得很好.
看起来你在使用 *** JS 播放器时遇到了麻烦,如果你花时间阅读文档,你会发现 *** 播放器只是一个 iframe.
试试我做的这个活生生的例子:http://jsbin.com/cocatuta/15/edit?js,输出
所以基本上我只是替换:
var videos = document.getElementsByTagName("video"),fraction = 0.8;
这样:
var 视频 = document.getElementsByTagName("iframe"),fraction = 0.8;
并添加两个函数playVideo
和pauseVideo
.
function playVideo() {player.playVideo();}功能暂停视频(){player.pauseVideo();}
完整代码:
//当视频可见时播放var 视频 = document.getElementsByTagName("iframe"), 分数 = 0.8;函数 checkScroll() {for(var i = 0; i
希望能帮到你!是的,阅读文档甚至应该帮助你"(最终)
I have been trying to look for help with respect getting a video to pause when a user scrolls away. I have already been able to find help for html5 videos but now I also need to know how the *** API can be used for the same.
the html structure I have that embeds the *** is as follows
<div class="ytube-container">
<iframe id="vplayer"
src="//www.***.com/embed/qKaMgJwBItM?modestbranding=1&showinfo=0&modestbranding=0&controls=1&rel=0&autoplay=1&vq=hd720"
frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
I used the following for html5 - does the *** API have a very different method to do the same?
<script>
//play when video is visible
var videos = document.getElementsByTagName("video"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.offsetWidth,
h = video.offsetHeight,
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 + w;
b = y + 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) {
video.play();
} else {
video.pause();
}
}
}
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>
I am not sure I understand how to entirely use the *** API I was able to find a code that stops one player if the other is playing but I dont see how that can be manipulated to achieve what I need.
<script>
players = new Array();
function on***IframeAPIReady() {
var temp = $("iframe.vplayer");
for (var i = 0; i < temp.length; i++) {
var t = new YT.Player($(temp[i]).attr('id'), {
events: {
'onStateChange': onPlayerStateChange
}
});
players.push(t);
}
}
on***IframeAPIReady();
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var temp = event.target.a.src;
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++) {
if (players[i].a.src != temp) players[i].stopVideo();
}
}
}
You done a great job with HTML5 player and the function checkScroll()
.
It seem you have trouble to use it with the *** JS Player, well if you take the time to read the doc, you discover that the *** player is just an iframe.
Try this live example i made : http://jsbin.com/cocatuta/15/edit?js,output
So basically i just replace :
var videos = document.getElementsByTagName("video"), fraction = 0.8;
By this :
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;
And add two function playVideo
and pauseVideo
.
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
Full code :
//play when video is visible
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 {
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();
Hope it's help ! And yes, read the doc "is even supposed to help you" (eventually)