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
Related
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.
I am presently tinkering with video.js, an open source HTML5 video player. There is this big-play-button (button name) which is shown before the video is started. Upon clicking the button "play", it disappears until the page is refreshed and the video has reloaded.
I would like to modify the code so that the button re-appears when the video is paused.
FWIW, in January 2017, someone made a change that displays the big-play-button on pause just by adding this class: vjs-show-big-play-button-on-pause
You can hide / show the big play button at any time using the VJS API, so no need to go about creating a new button. bigPlayButton.show() and bigPlayButton.hide() are what you're looking for. Here's an example that should get you on the right path:
var video = videojs('my-awesome-video');
video.on('pause', function() {
this.bigPlayButton.show();
// Now the issue is that we need to hide it again if we start playing
// So every time we do this, we can create a one-time listener for play events.
video.one('play', function() {
this.bigPlayButton.hide();
});
});
Here's a working example.
UPDATE FOR 5.0
We (ok, it was me) broke it in 5.0 with a css change. We need to revisit getting this approach to work (or whether it should), but in the meantime, adding these styles should do it.
.vjs-paused.vjs-has-started .vjs-big-play-button {
display: block;
}
so, I have a function that makes an image invisible, and at the same time starts playing a video (1 out of 6) underneath it. It works great, the div fades out, and it plays. However, it only works the first time.There are six thumbs(all an item in a list), and they each play one of the videos, right? So, each time a thumb is pressed, I need the image to comeback(quickly) and then fade out slowly like it does. So, a mini reset of sorts on each click. the code is
$(document).ready(function () {
$('li, .thumbs').on('click', function () {
var numb = $(this).index(),
videos = [
'images/talking1.m4v',
'images/talking2.m4v',
'images/talking1.m4v',
'images/talking2.m4v',
'images/talking1.m4v',
'images/talking2.m4v'
],
myVideo = document.getElementById('myVid');
myVideo.src = videos[numb];
myVideo.load();
$('#MyT').addClass('clear');
myVideo.play();
});
});
i tried shuffling things around, and no dice. And, yes, it is supposed to start fading once the video has finished loading. This is for iPad and I haven't found a better way around the flicker you get when a video loads.
Edit: okay, trying to explain this best way I can...
the page loads, and you have the image on top. There are six thumbnails, and one is clicked. The image fades out while the video loads(this doesn't have to be synced, so long as the video finishes loading first), then it plays. If a some point, another of the thumbs is pressed, the image pops back up and fades, to cover while the video loads. Basically, the condition of the first click repeats on each click.
Try the following for checking when the video has ended:
$('#my_video_id').bind("ended", function(){
alert('Video Ended');
$('#MyT').removeClass('clear');
});
Taken from http://help.videojs.com/discussions/questions/40-jquery-and-event-listeners
Seems to have worked for them, so let me know if you have similar results.
Edit
So when your thumbnail is clicked you should first check to see if a video is already playing as discussed in the link in the comments section. If a video is playing, stop that video and add the class 'clear' back the that video. Then you can go ahead and fade the 2nd video in. I obviously can't write all that for you because I don't know all the conditions, constraints and the html code you have, but the basic outline is there.
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.
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.