Develop Reference

JW Player seek and pause from click

I need to create a video player using jwplayer that can play thru specific areas of a video. Im doing this to reduce the amount of videos we need to load on page load and hopefully simplify ongoing updates if the timing needs adjustment later. I would just modify the data attributes.
I do not want request a page refresh, or a different video.
GOAL: The desired behavior would be, hit button 1, play 0-10 seconds and pause. Hit button 2, play 11-20 seconds and pause. hit the first button and repeat the behavior if desired.
the buttons would exist like this:
I made some code updates but the functionality isn't fully working. This only now works after hitting the button twice... If hit 0-15, then hit 15-25, it starts to play then just stops. I believe that the stop is being caused by the stop im calling within the condition?
<section>
<div class="seeker" data-start="0" data-end="15">Go there and pause</div>
</section>
<section>
<div class="seeker" data-start="16" data-end="20">Go there and pause</div>
</section>
jwplayer("player").setup({
file: "http://sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4",
});
$(function(){
$("section").each(function(){
$(this).find(".seeker").bind('click',function(){
var start = $(this).data('start'),
end = $(this).data('end');
jwplayer().play();
jwplayer().seek(start).onTime(function(event) {
if(event.position>end) {
jwplayer().stop();
}
});
});
});
This code works on load so the functionality is def working but I just need to attach to the click and use the 'start','end' vars.
jwplayer().onReady(function(){
jwplayer().seek(0).onTime(function(event) {
if(event.position>15) {
jwplayer().stop();
}
});
});
Work in progress is here:
http://jsfiddle.net/arkjoseph/n2rpq1t4/21/

Start a HTML5 video after a certain amount has loaded

Can you tell me how to start a HTML5 video after it loaded a certain amount? For example if i have a 10 second video and i want it to start only when it loaded at least 5 seconds. How can i determine when that happenes?
Edit: We assume that the video is loading and it is in a .pause() position not in .stop()

You can read the buffered property of the video element to see what time ranges have been loaded. The buffered property is a collection of time ranges that have been loaded; you can read the start and end of the nth range with buffered.start(n) and buffered.end(n). Since you're interested in the end-time of the first range, you can read the number of seconds loaded on some video videoElm with videoElm.buffered.end(0).
A <video> element fires progress events to indicate that it has loaded a new chunk of data (and consequently that the end time of some time range in buffered is increasing).
You can check if your loaded buffer is big enough after each progress event:
var someVideo = document.getElementById("myVideoId");
someVideo.addEventListener("progress", function playOnLoad(e) {
var theVideo = e.target;
if(theVideo.buffered.length > 0 && // if we have a buffer
theVideo.buffered.end(0) >= 5) { // if first buffer is at least 5 secs
theVideo.play();
theVideo.removeEventListener(playOnLoad);
}
});
If you're actually interested in whether the video can safely play through without interruption, the browser uses the canplaythrough event. The browser will fire this event when it predicts that the loading rate of the video will allow it to play through without interruption (but it may sometimes be wrong, if the loading rate suddenly changes).

I don't believe this is possible since every browser has it's own measurement in seconds when a video is ready to be played e.g. the browser controls the buffer load.
The preload attribute on the video element gives you some form of control, but not in seconds and not cross-browser consistent.
Check the table on this page.
I'm not sure why you would control this. The only thing you should be worried about is if the video can play through.
this.video.on('canplaythrough', function () {
this.video[0].play();
}.bind(this));
If for some reason you need to capture an event earlier check this page for other events.

Hide Div when YouTube Video Ends

I have an absolutely placed div with an embedded YouTube video inside of it. I am placing it over another image on my website with the intention of showing first-time visitors a short video, then hiding the div with the video to reveal the original content of the page.
I know how to hide and show my div with click events, but I am very new to Javascript. I need help writing the function that would determine the YouTube video has ended and apply visibility:hidden to my div. Any help is greatly appreciated!

your going to want to take a careful look at the documentation, paying special attention to the Events section.
you will be using
onStateChange:
This event is fired whenever the player's state changes. Possible values are unstarted (-1), ended (0), playing (1), paused (2),
buffering (3), video cued (5). When the SWF is first loaded it will
broadcast an unstarted (-1) event. When the video is cued and ready to
play it will broadcast a video cued event (5).
and you will want to do something when the state equals 0, which means ended, something similar to the below:
// attach your listener
function onYouTubePlayerReady(playerId) {
var ytplayer = getElementById("myytplayer");
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
}
// your callback function
function onytplayerStateChange(newState) {
if (newState === 0){
$('yourContainingDiv').hide();
// or if you want to just remove it...
$('yourContainingDiv').remove();
}
}
if you are having trouble with addEventListener, check out YouTube player api - addEventListener() does not work for me?
addEventListener looks like it isn't supported by early versions of IE and might be slightly buggy

HTML5/Jquery - What is the correct way to preload audio?

I've created a game which has a number of elements on a page,
when the mouseover event on the element is triggered an audio file plays.
Its working, however,
My question is, What is the correct way to preload audio?
So i can be sure that my audio plays as soon as the user interacts with the element.
I'm currently initialsing my audio object on mouseover
$('.circle').mouseover(function() {
// retrieve ref from data- attribute
var noteIndex = $(this).attr('data-note');
// locate url from the array notes using noteIndex ref
var snd = new Audio(notes[noteIndex]);
snd.play();
}
I'm aware of the Audio tags, but i'm unsure how that differs from my technique above.
EDIT : example of how i'm currently loading audio http://jsfiddle.net/kA5Bv/1/ (note the key doesn't play immediately, thats because the example audio files i've used has a gap of 1/2 second or so at the beginning)
Thanks in advance,
Cam

What about the $(document).ready(function() {});, it will initialise your audio object on DOM load, before page contents are loaded.

Youtube embedded video activating too late to accept javascript call

I have a YouTube video embedded in my page. It is hidden (display:none). You need to click one of the video link buttons to display the video and play it. The links are defined like this:
Video 1
Video 2
xxxxxxxxx represent YouTube video IDs.
Here's the play function:
function play(id)
{
ytplayer.style.display = 'block';
ytplayer.loadVideoById( id, 0, 'hd1080' );
}
It's fundamentally pretty simple! But here's the problem. since the video player is hidden, the flash object is not activated. So when I click a video link, the line ytplayer.style.display = 'block'; displays the video player, but it takes about about half a second for flash to load. During this time it cannot accept any method calls, such as the next line ytplayer.loadVideoById( id, 0, 'hd1080' );. Essentially, I have to click the link twice, once to load up the flash video player, the second time to actually load the video into the player.

It looks like once you enable the video, you need to setup and wait for a callback:
onYouTubePlayerReady(playerid)
(Taken from this page: http://code.google.com/apis/youtube/js_api_reference.html)
In that function you could then do any calls that require the player to be loaded:
ytplayer.loadVideoById( id, 0, 'hd1080' );
If you aren't using the chromeless player, you may need to instead listen for the onStateChange and onError events.