Ok so when someone scrolls to the video it starts and when someone scrolls away from the video it stops using load restarting the video and showing the poster.
The problem I have is that I don't want this function to run when someone clicks to pause the video. It would be pretty annoying for the scroll handler to take control.
jQuery(window).load(function(){
jQuery(window).scroll(function(){
playvideo();
});
});
var playvideo = function(){
var scrollTop = jQuery(window).scrollTop()+jQuery(window).height();
var elem='.video';
var video = document.getElementById('video-background');
var elheight = jQuery(elem).height();
if(scrollTop >= jQuery(elem).offset().top+elheight){
//fade out the video play button and start the video
$j('.video-caption-wrapper').fadeOut("Fast",function() {video.play();});
}else{
// fade in the play button and reload the video
$j('.video-caption-wrapper').fadeIn("Fast",function() {video.load()});
}
}
$j('#video-background').click(function(event) {
//when the video is clicked pause it and unbind scrolling
if (this.paused == false) {
this.pause();
$j(window).off("scroll",playvideo);
} else {
this.play();
}
});
This:
jQuery(window).load(function(){
jQuery(window).scroll(function(){
playvideo();
});
});
Should be:
jQuery(window).load(function(){
jQuery(window).scroll(playvideo);
});
That will allow you to refer to the playvideo function when removing the scroll listener. Right now you try to remove playvideo as a listener when you have never added it. You added an anonymous function which calls playvideo.
Related
I'm trying to make a function that when you click a play button, the video is showed center in page with lightbox effect. The problem is that i've set it to start playing, when you click the "open in lightbox play button" but the HTML5 video control show the play/pause button as "play" and not "pause". Is it possible to registrer if the video is playing it should add "pause" style from start etc.
link to live problem: http://instagib.dk/westring-kbh/
jsfiddle demo: http://jsfiddle.net/8rj09kL9/
I've tried something like this.
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function() {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function() {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// toggle play / pause
$('#play-pause').click(function() {
$('.toggle-play-pause').toggleClass('play','pause'); //Adds 'a', removes 'b' and vice versa
});
// video functionality
window.onload = function() {
// Video
var video = document.getElementById("showreel-video");
// Buttons
var playButton = document.getElementById("play-pause");
// Event listener for the play/pause button
playButton.addEventListener("click", function() {
if (video.paused == true) {
// Play the video
video.play();
} else {
// Pause the video
video.pause();
}
});
}
I've changed something in your code, since you already use jquery, I converted it all to jquery.
$(document).ready(function () {
// light box effect with auto play
// show the popup outer
$("#play-index-video").click(function () {
$(".video-popup-outer").show();
$('.toggle-play-pause').addClass('pause');
$("#showreel-video")[0].play();
});
// hide the popup outer
$(".close-video").click(function () {
$(".video-popup-outer").hide();
$("#showreel-video").load();
});
// Event listener for the play/pause button
$("#play-pause").click(function () {
$('.toggle-play-pause').toggleClass('play', 'pause'); //Adds 'a', removes 'b' and vice versa
var video = $("#showreel-video")[0];
if (video.paused) {
video.play();
} else {
video.pause();
}
});
});
DEMO http://jsfiddle.net/8rj09kL9/4/
Seems to work somehow.
Description of Problem (Fiddle):
Clicking the #test box multiple times creates layers of audio playing simultaneously and briefly pauses or staggers the .fadeOut() effect with each press. I want to prevent subsequent mousedown events from firing so that the .fadeOut() effect completes seamlessly and doesn't trigger additional audio plays.
Code:
$('#test').mousedown(function() {
var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
sound.play();
$('#test').stop(true).fadeOut(2000);
});
This will fire an event a single time: http://api.jquery.com/one/
The easy way:
var clicked = 0;
$('#test').mousedown(function () {
if (clicked == 0) {
clicked = 1;
var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
sound.play();
$('#test').stop(true).fadeOut(2000);
setTimeout(function(){clicked = 0;}, 2000);
}
});
http://jsfiddle.net/yxDSL/1/
$('#test').one('click',function() { //would only trigger on first click
var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
sound.play();
$('#test').stop(true).fadeOut(2000);
$('#test').click(function(){ // for subsequent click write the function inside this
});
});
This'll do the trick...
$('#test').mousedown(function() {
var sound = new Audio("http://sounddogs.com/previews/3668/mp3/824357_SOUNDDOGS__ri.mp3");
sound.play();
$('#test').unbind("mousedown").stop(true).fadeOut(2000);`
});
So I have a jquery mobile page with an html 5 video in it and that I want to be able to either stop playing and reset its self or just automatically pause the video. Would this be the correct javascript?
<script>
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;}
if ($.mobile.activePage.attr('id') != 'a28') { "restart"}
</script>
have you tried the pagehide , it gets called when the current active page gets hide / changed.
$(function(){
$('#a28').live('pagehide',function(){
//stop the video
});
});
Make use of a loop, to check if the user is on the webpage. Store the time.
var lastSeen;
var loop = function (){
lastSeen = Date.now();
setTimeout(loop, 50);
};
loop();
var video = document.getElementById('Video1');
video.addEventListener('timeupdate', function (){
if(Date.now() - lastSeen > 100){
this.pause();
}
}, false);
i have some problems with my script. So, i want to detect end of my scrolling action. I have my alert when i'm scrolling but not if i'm ending it. Can you help me? This is my code:
var animatable = $('body, html');
var animating = false;
animatable.animate( {scrollTop: $('#foo').offset()})
$(window).scroll(function(e) {
if(!animating){
animatable.stop(false, true);
alert('stop scrolling');
}
animating = false;
});
and some fiddle: http://jsfiddle.net/yhnKR/
is this what you're trying to achieve:
$('body').animate( {scrollTop: $('#foo').offset().top},1000,function(){
alert('stop scrolling');
});
http://jsfiddle.net/yhnKR/2/
You don't have to watch the scroll event if you animate the scroll with jquery.
Ok, if you want to detect when the user stopped scrolling, you'll have to use a timeout to check if the user stopped. Otherwise you'll get the event for each scroll step.
Like this:
var delay = 1000;
var timeout = null;
$(window).bind('scroll',function(){
clearTimeout(timeout);
timeout = setTimeout(function(){
alert('scrolling stopped');
},delay);
});
http://jsfiddle.net/yhnKR/4/
maybe adding new events like this:
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
would help
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 delay, 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.