Develop Reference

Stopping a scrollhandler from running after someone clicks an element

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.

javascript increment setInteval counter while video is playing

I have the following code that detect if user is idle or not. On page load, a timer will run and if the user is idle for a certain of seconds the timer will pause and resume if the user is active. And I have also codes that detect if video is playing, if the video is playing timer should run and if the video is stop/pause a timeout will run and detect if the user is still active
The problem is even if video is playing, the timer paused and it will start to idle. What I want is when video is playing timer should countinue to increment.
Heres my code:
function setPlayingVideoToTrue(){playing_video = true;}
function setPlayingVideoToFalse(){playing_video = false;}
// check if a video iframe exists
var iframe_videos = $('body').find('iframe');
if(iframe_videos.length > 0){
// create ready events for every iframe
iframe_videos.each(function(index){
// add a temporary id for the iframe
// append additional parameters to the end of the iframe's src
var temporary_player_id = 'iframe_player_'+ index;
var new_iframe_src = $(this).attr('src') +'?api=1&player_id='+ temporary_player_id;
$(this).attr('id', temporary_player_id);
$(this).attr('src', new_iframe_src);
// add event listener for ready
$f(this).addEvent('ready', iframe_ready);
});
// when a player is ready, add event listeners for play, pause, finish, and playProgress
function iframe_ready(player_id) {
$f(player_id).addEvent('play', setPlayingVideoToTrue);
$f(player_id).addEvent('playProgress', setPlayingVideoToTrue);
$f(player_id).addEvent('pause', setPlayingVideoToFalse);
$f(player_id).addEvent('finish', setPlayingVideoToFalse);
}
}
function start_idle_timer(){
var timer = 0;
function increment_duration()
{
if(isPaused === false)
{
timer++;
}
// increment timer if video is playing
if(playing_video === true){
clearTimeout(idleTimer);
isPaused = false;
}
if(playing_video === false && isPaused === false){
// stop timer if the user is idle for 3 minutes
var idleTimer = setTimeout(function(){
// console.log('idle');
clearInterval(check_time);
isPaused = true;
// a modal will apper to inform that user is on idle state
$('#linkage').trigger('click');
var modal_timer = 0;
// timer for modal idle timer
continue_modal_timer = setInterval(function(){
modal_timer++;
inactivity_timer = modal_timer;
if(modal_timer == 60)
{
clearInterval(continue_modal_timer);
clearTimeout(idleTimer);
}
}, 1000)
}, 10000);
}
// bind to all elements on DOM possible events indicating the user is active
$('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
clearTimeout(idleTimer);
isPaused = false;
});
}
// initialize the interval
check_time = setInterval(increment_duration, 1000);
}
// check if start_timer is present from the loading page to record the time duration of the user
if($('.start_timer').length > 0){
start_idle_timer();
}

How to pause a video after a certain time? video.js

I've been messing with video.js whilst learning javascript but can't seem to figure out how to make the video pause after a certain time has passed.
myPlayer.play(function(){
whereYouAt = myPlayer.currentTime();
if (whereYouAt == 10) {
myPlayer.pause();
}
})
That is my pause code.

Check the currentTime in the timeupdate event callback:
var pausetime = 2; // stop at 2 seconds
var myPlayer = videojs('example_video_1');
myPlayer.on('timeupdate', function(e) {
if (myPlayer.currentTime() >= pausetime) {
myPlayer.pause();
}
});
myPlayer.play();
JSFiddle demo: http://jsfiddle.net/EdjxN/17/

Play few seconds of video onclick

Is there a way to play html video only for few seconds?
Currently when a user clicks on a table row the video seeks to a predefined time (highlighted below). So in the below example the video would seek to 7 seconds.
Is there a way to play the video from seconds onwards for just 10 seconds? i.e seek to 00:07 and play to 00:17 and stop?
Thanks

You can use timeupdate event along with currentTime attrribute
function playVideo() {
var starttime = 7; // start at 7 seconds
var endtime = 17; // stop at 17 seconds
var video = document.getElementById('yourVideoId');
video.addEventListener("timeupdate", function() {
if (this.currentTime >= endtime) {
this.pause();
}
}, false);
//suppose that video src has been already set properly
video.load();
video.play(); //must call this otherwise can't seek on some browsers, e.g. Firefox 4
try {
video.currentTime = starttime;
} catch (ex) {
//handle exceptions here
}
}

You could create a timer so after you "seek" the video, it will stop the video in 10 seconds.
so inside you seek function you would place.
var Video = $('Video Element')[0];
// After getting the video element play it.
Video.play();
// Now create a timer so in 10 second (1s = 1000 so 10s = 10000 ms) it will pause the video.
setTimeout(function(){
Video.pause();
},10000);

I made a small script which might help with this.
https://github.com/demux/jquery-video-cuepoints
Usage:
$(document).ready(function() {
var $v = $('#video');
$v.cuepoints({
17: function() {
$v[0].stop();
}
});
$('button').click(function(){
$v[0].play();
try {$v[0].currentTime = 7;} catch(e) {}
});
});

What HTML5 video event refers to the currentTime of the video being played?

I want the user to have the option to skip the preroll ad after a specified time (say 5 secs into the ad). Then the normal video would play. How can I achieve this? Currently I have something inline of this:
var adManager = function () {
var adSrc = url,
src = "http://media.w3.org/2010/05/sintel/trailer.mp4";
var adEnded = function () {
videoPlayer.removeEventListener("ended", adEnded, false);
videoPlayer.removeEventListener("playing", adPlaying, false);
$("#companionad").hide();
videoPlayer.src = src;
videoPlayer.load();
videoPlayer.play();
console.log(videoPlayer.currentTime);
};
var adPlaying = function () {
var companionad = $(responseXML).find("HTMLResource").text();
$("#companionad").html(companionad);
console.log(videoPlayer.currentTime);
}
return {
init: function () {
videoPlayer.src = adSrc;
videoPlayer.load();
videoPlayer.addEventListener("ended", adEnded, false);
videoPlayer.addEventListener("playing", adPlaying, false);
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
console.log(videoPlayer.currentTime);
}
};
}();
adManager.init();
What I am trying to do is:
if (videoPlayer.currentTime > 5) {
$("#skip").show();
}
show the skip button and continue to normal video. Is there any event that is continually fired as the video play progresses?

Do your check against the media.currentTime property in a handler for the timeupdate event. See documentation:
The timeupdate event is fired when the time indicated by the
currentTime attribute has been updated.
Just as an aside, this HTML5 video demo page is a really handy reference for playing around with the various properties and events available to you.