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.
Related
I have youtube video embedded in my page inside of a div which can be hidden and shown with a button (using jQuery/css). When I hide and show then show the div the video has to reload and start form the beginning. Is there a way to remember the video's progress and playback form the same position? Or better yet a way that that video would not have to reload?
Here is the html5 for the div/you-tube video:
<div id="you-tube-div">
<object width="640" height="390" data="http://www.youtube.com/v/fQ2Lnln2BOk" type="application/x-shockwave-flash">
<param name="src" value="www.youtube.com/v/fQ2Lnln2BOk"/>
</object>
</div>
EDIT:
Here is a little jFiddle that shows what I am trying to do:
http://jsfiddle.net/ntk3B/
I recommend converting your object embed to the newer iframe element for embedding the youtube video. Using code from this stackoverflow post:
How to pause a YouTube player when hiding the iframe?
//via: https://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("you-tube-div");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
I've created this fiddle that does what you want:
http://jsfiddle.net/RSDxC/2/
Do you need to hide the video using the property "display"? If you use the property "visibility", and values "visible" and "hidden" to control the visibility of the item then the video will hold it's paused place.
Here is a link about the difference between the display and visibility properties...
Here are some additional things to consider:
If you don't pause the video, and you set visibility to hidden, then the video and audio will continue to play. However you could use the youtube javascript API to control the video.
If you use visibility, block elements will still be affecting the elements around them, you just won't be able to see them. That's why the property is simply "visibility"
If you do want/need to use the display property, which would not be surprising, then you are going to want to store certain information about the video in a variable when you choose to hide it (e.g. it's point in playback), and then use that value when you click the button again to display the video but starting from the point in the video where you left off. I can't recommend getting to know the youtube API enough... this will give you the power to manipulate youtube videos as you wish. Let me know if you have any questions and best of luck!
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 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
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've got a nice image on my website that has a play button on it. What I'd like to do is replace that image with a video (longtail video player) when a user clicks on the image. The image can be wrapped in a link or whatever.
Usually, people just have this sort of thing pop up a modal window but I was hoping for a slicker solution that would happen in the same space that the image was inside.
Is there some way to accomplish this using jQuery?
There are a number of ways to accomplish this, but there often quirks in the different browsers that you may have to work through.
One way is to embed the player on the page within a view that is hidden with a style (display: none). The player may have to have the wmode property in the flash embed set to "transparent" to do this. You can then hide the image and show the embed in the same location with jquery's hide and show methods:
$('#img-el').click( function () {
$(this).hide();
$('#player-embed-div').show();
});
Another way to do this is to use SWFObject (http://code.google.com/p/swfobject/) to embed the video dynamically on clicking the image:
$('#img-el').click( function () {
var so = new SWFObject("movie.swf", "mymovie", "400", "200", "8", "#336699");
so.write("img-el");
});
You may need to tweak the code above to get it to work and you may have trouble across browsers since the handling of Flash embedding is different across them.
You can replace the image with a <div> when clicked, and then setup the video player like this: http://jsfiddle.net/hxaZx/.
$("img").click(function() {
var $div = $("<div>").text("this is the div to use for video");
$(this).replaceWith($div);
// jwplayer($div.get(0)).setup({ ... });
});
If you don't mind the video being include onload, then I would embed both the image and the video and hide the video on startup. then, bind a clickhandler to the image that will hide the image and show the video.
var $image = $('#myimage');
var $video = $('#myvideo'); // hide #myvideo with css
$(function(){
$image.on('click', function(){
$image.hide();
$video.show();
});
});
A little while ago I was looking for a way to make the jpeg thumbnails of YouTube videos into a link to enlarge and open a player, in a similare way to the way Facebook shows videos in newsfeed.
The solution I used (which is definitely not the oly way, but worked for me) is similar to the answer from Pimvdb.
I simply had another page which had the YouTube player embed code on it (dynamically populated with the correct video by passing a variable to the URL) and then loaded that in with jquery.load
$('#imageElement').live("click", function () {
$('#currentlyHiddenVideoDiv').load('videoPage.asp?vidid=idOfVideoToPlay').show()
}
You'd have to have your own method of passing the required video id/link into the player page and of course, I realise this is not with the YouTube player, but an embedded player in a separate file loaded into the required page in this method should work much the same.
This means that the video content is only loaded in when required, to the that point you just load your player button.