I have this page: http://www.yasyf.com/services.html, in which a video autoplays. I would like to have it so that once the video finishes playing (a set amount of time), the page automatically scrolls down to the text, using a jQuery scrollto with timed d开发者_StackOverflow中文版elay, but only if the page has not yet been scrolled. Is this possible?
See here the example I made for you.
MORE INFO
Depending on the player you're using, a video finished event could be available. You can then attach the scrollTo function to it. You can read more about this event here:
- YOUTUBE
- FLOWPLAYER
- ADOBE
If you can, give also a look to this incredibly useful resource and this spec about video in HTML5.
About vid.ly : It seems to me that they use an HTML5 with Flash fallback player. See here the "how can I use vid.ly" section.
JS code :
// add a scrollTo method to jQuery
$.fn.scrollTo = function(duration){
if(duration == null){ duration = 1000; }
var offset = $(this).offset().top - $(window).height()/2 + $(this).height();
$('html,body').animate({ scrollTop: offset}, duration);
}
// Then when the dom is loaded
$("document").ready(function() {
//for HTML5 (for flash please see the ADOBE link above.)
$("video").bind("ended", function() {
// Log on console just for debug
console.log("autoplay ended! About to scroll to...");
// scroll to a div with id="scroll_to_here"
$('#scroll_to_here').scrollTo();
});
});
var scrolled = false;
$(window).scroll(function(){
scrolled = true;
});
var scroll_timer = setTimeout(function(){
if(scrolled !== true)
{
// scroll to whatever
}
},10000);
This is a simple script to do that. I assume scroll / keydown / mouse click to say "the user has interacted with the page, don't auto-scroll."
(function() {
var scrollPage = function() {
$.scrollTo(xyz);
};
var c = setTimeout(scrollPage, 35000);
$(document.body).bind('scroll mousedown keydown', function() {
clearTimeout(c);
});
})();
Let me know if this helps.
精彩评论