javascript 根据滚动位置触发视频自动播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15594881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Triggering a video autoplay based on scroll position
提问by nickyr
I am writing a script that uses the Wipe animation from the scrollorama.js script. I am hoping to be able to implement a video to autoplay at certain markers in the scroll depth: ie, when a video page has wiped out another, and is now fully viewable. I have figured out how to measure scroll depth, i am successfully logging it in my console. I have figured out how to measure how deep i have scrolled, but maybe i am so tired, i don't know how to ask the video to play automatically at the scroll depth. I hope this is a legal question, and that I can get some assistance. Has anyone out there tried this before? Here is the code thus far.
我正在编写一个脚本，该脚本使用来自 scrollorama.js 脚本的擦除动画。我希望能够实现一个视频以在滚动深度的某些标记处自动播放：即，当一个视频页面已经清除了另一个页面，并且现在可以完全查看时。我已经弄清楚如何测量滚动深度，我成功地将它记录在我的控制台中。我已经弄清楚如何测量我滚动的深度，但也许我太累了，我不知道如何让视频以滚动深度自动播放。我希望这是一个法律问题，我可以得到一些帮助。有没有人以前试过这个？这是迄今为止的代码。
enter code here$(document).ready(function() {
enter code here$(document).ready(function() {
$(window).scroll(function(e) {
$(window).scroll(function(e) {
var scrollAmount = $('body').scrollTop();
console.log(scrollAmount);
});
});
var controller = $.superscrollorama();
var pinDur = 800;
// create animation timeline for pinned element
var pinAnimations = new TimelineLite();
//pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5)
pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5 )
pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5);
pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5);
//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));
controller.pin($('#content_wrapper'), pinDur, {
anim:pinAnimations,
onPin: function() {
$('#content_wrapper').css('height','100%');
},
onUnpin: function() {
$('#content_wrapper').css('height','1000px');
}
});
});
采纳答案by nickyr
I figured this out, so i answer my own question with the help of a lot of other answers patched together here!
我想通了，所以我在许多其他答案的帮助下回答了我自己的问题，这些答案在这里拼凑起来！
If anyone is interested, the html was simple:
如果有人感兴趣，html很简单：
<div id="videoHolder"></div>
Jquery was also simple:
Jquery也很简单：
$(function(){
$(window).scroll(function(e) {
var scrollAmount = $('body').scrollTop();
console.log(scrollAmount);
if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") {
$("#videoHolder").html(
'<video width="1200" height="700" autoplay>' +
'<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>' +
'<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' +
'</video>');
回答by Andrey Merkulov
just add the script from below and add playonscroll param to your video tag anywhere on a page.
只需从下面添加脚本并将 playonscroll 参数添加到页面上任何位置的视频标签。
As well some times it's required to use different scroll container than body, sometimes its not obvious, so the following code works like a charm for me:
有时还需要使用与 body 不同的滚动容器，有时并不明显，因此以下代码对我来说就像一个魅力：
setInterval(function () {
$('video[playonscroll]').each(function () {
var videoElement = $(this)[0];
var eTop = $(this).offset().top;
var elementOffestY = (eTop - $(window).scrollTop());
var videoOffset = [elementOffestY, elementOffestY+$(this).height()];
if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) {
console.log('play');
if (!videoElement.playing) {
videoElement.play();
}
} else {
if (videoElement.playing) {
videoElement.pause();
}
}
});
},300);
in case if you always use body container for scroll just change setInterval to $(window).scroll
如果您总是使用主体容器进行滚动，只需将 setInterval 更改为 $(window).scroll
And don't forget to define property for Video tag element:
并且不要忘记为 Video 标签元素定义属性：
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function(){
return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}
})
回答by HrishiX
So in this case we can use an integrated JavaScript API namely Intersection Observer. Now our main task is to play the video at an particular position, so for this task we will set up a trigger on the intersectionRatio value.
所以在这种情况下，我们可以使用一个集成的 JavaScript API，即Intersection Observer。现在我们的主要任务是在特定位置播放视频，因此对于此任务，我们将在intersectionRatio 值上设置触发器。
const images = document.querySelectorAll(".mydivTriggerClass");
vid = document.getElementById("myVideoId");
observer = new IntersectionObserver((entries) => {
console.log(entries);
if (entry.intersectionRatio > 0.34) {
vid.play();
} else {
entry.target.style.animation = "none";
}
});
observer.observe(image);
NOTE: Please note that the console log entries are optional - its just so that when you inspect you get the info showing where this intersection ratio came from.
注意：请注意控制台日志条目是可选的 - 它只是为了在您检查时获得显示此交集比来自何处的信息。
For a perfect working example please visit this link.
有关完美的工作示例，请访问此链接。
