问题描述
我正在编写一个使用scrollorama.js脚本中的Wipe动画的脚本。我希望能够在滚动深度中的某些标记处实现视频自动播放：即，当视频页面消灭了另一个时，现在可以完全查看。我已经弄清楚如何测量滚动深度，我已成功将其记录在我的控制台中。我已经弄清楚如何测量我滚动的深度，但也许我很累，我不知道如何让视频在滚动深度自动播放。我希望这是一个法律问题，我可以得到一些帮助。之前有没有人试过这个？这是迄今为止的代码。
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.
在此处输入代码 $（document）.ready（function（）{
enter code here $(document).ready(function() {
$（窗口）.scroll（函数（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');
}
});
});
推荐答案
我想出来了，所以我回答了我自己的问题在这里拼凑了许多其他答案的帮助！
I figured this out, so i answer my own question with the help of a lot of other answers patched together here!
如果有人有兴趣，html很简单：
If anyone is interested, the html was simple:
<div id="videoHolder"></div>
Jquery也很简单：
Jquery was also simple:
$(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>');
这篇关于根据滚动位置触发视频自动播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！