How to pause individual videos when working with multiple videos in different slides

[jodriscoll]

Sources for my code:
http://www.massgeneral.org/heartcenter/ask/default-tubeplayer.html [HTML]
http://www.massgeneral.org/heartcenter/ask/assets/askHeart-tuberplayer.js [jQuery ref]
http://www.massgeneral.org/assets/js-plugins/jquery.tubeplayer.js [tubePlayer ref]

Description:
Thanks for the great plugin to start off! I've been fiddling around with getting tubePlayer to work in the environment I'm working with and I've run into a couple issues. I've managed to get all my videos generating properly, however, when I'm attempting to bind the "pause" to my links in the bottom carousel, only the first link is properly pausing playback. If you navigate through the 5 slides at the bottom of the page, you will see that only the initial slide (Corrigan Women’s Heart Health...) is properly pausing the video when you navigate from the other videos. Here are the steps of how to locate the issue:

Steps:
01: Load http://www.massgeneral.org/heartcenter/ask/default-tubePlayer.aspx
02: Play video
03: Click the "Heart Failure" link in the bottom carousel
04: Initial video stops from the "Corrigan Women’s Heart Health" slide
05: Play the video on the "Heart Failure" page
06: Click the "Corrigan Women’s Heart Health" link in the bottom carousel
06-a: The video from the "Heart Failure" slide is still playing.
06-b: This does not happen if you complete steps 1-5 using the "Corrigan Women’s Heart Health" & "Coronary Artery Disease" slides.

After fiddling around with the UI, I'm sure you'll get an understanding that when a user initiates the anchor tag to switch slides, it will pause all the other slides. Also, if the user clicks the same slide they are currently on, it does not pause the video they are currently viewing, but instead pauses all the other videos. If you look into the HTML, you can see that I'm excluding the ID of the video sharing the same instance as the slide thumbnail from the anchor onClick.

I can't seem to find any examples of this plugin being used in this fashion. Any help would be EXTREMELY appreciated.

Second Inquiry:
Is there a way to control the initial thumbnail that is being generates for the YouTube videos? Sometimes the thumbnails that are generated are not exactly "flattering". Thanks!

[jodriscoll]

Woops, I accidentally closed it! I just reopened it.

[nirvanatikku]

Sorry I haven't been able to spend time playing with this just yet, but I hope to tend to it this weekend.

[nirvanatikku]

Re: First inquiry -- Why not instantiate 1 player, and have carousel invoke the 'cue' or 'play' methods of that player?

i.e.... instead of:

jQuery("#Wood").tubeplayer({ initialVideo: "5JNfdg4H9wg" });
jQuery("#Kath").tubeplayer({ initialVideo: "bnd_u7py1q8" });
jQuery("#Moor").tubeplayer({ initialVideo: "44vtE4rnu5Y" });
jQuery("#Bagg").tubeplayer({ initialVideo: "iq5_wqYFX-M" });
jQuery("#Elli").tubeplayer({ initialVideo: "rrLOJ6VGpyM" });

do:

window.player = jQuery("#your-single-youtube-player").tubeplayer({initialVideo: "{{video id of the first video in your carousel}}"});

and then instead of calling 'pause' on the other players, like so:

a href="#" onClick='jQuery("#Wood, #Kath, #Moor, #Elli").tubeplayer("pause")'

have them actually cue their videos --

a href="#" onClick="if(player)player.tubeplayer('cue','{{the specific video id to be cued}}');"

you'll need to re-structure your UI such that all ".askyourself-doctor" elements will actually wrap the ".videoDesc.heartcenter" instead of the ".videoPlayer.jquery-youtube-tubeplayer" div's.

Does that make sense? Let me know what you think.

Re: Second inquiry -- unfortunately not (to my knowledge). This is ultimately controlled by the user who uploads the video. So, if you own the content, you should be able to specify the thumbnail.

[jodriscoll]

Thanks a bunch for responding! I will spend some time tomorrow trying to get this to work. Would it be possible to put a jsfiddle together showing the functionality you outlined? Thanks a lot for taking the time to respond!

[jodriscoll]

Unfortunately, each video is associated with the DIV in which is being hidden and shown when the user navigates through the carousel. Putting them all within a single div would cause conflicts with the showing and hiding that is currently set up.

Unless you can provide an example of this custom method your suggest, can you please help me figure out why the current system I'm using only works for the first 2 videos and not the rest? I'm trying to get my current system to work, not completely start over and rebuild the entire interface.

I would greatly appreciate either an example of the new method or a fix for the current method. Thanks so much!

[jodriscoll]

I'm still trying to get a response for this... When you say "1 player, are you suggesting that I combine all my videos into one and cue different times in order to play them?".

I don't understand exactly what you mean...

[jodriscoll]

It appears after talking with a few of my fellow developers, you are suggesting that I combine all the videos into one, and rework the way the other plugins handle the video(s). Instead, it would be best to troubleshoot why only 2 of the 5 videos are working with the plugin you've wrote.

Please let me know if you can help any further, otherwise, I will have to use another plugin.

[jodriscoll]

I noticed this user had a similar issue and was able to make it work. Could you please work with improving the plugin and explaining how I can get it to work this same way?

http://stackoverflow.com/questions/8631541/fully-stop-a-youtube-video-on-closing-a-div-container-containing-the-youtube-if

[nirvanatikku]

Don't you think it's a bit excessive to have 5 videos on the page when all you're doing is ultimately playing a single video? if your use case was different i think it may make sense to try to troubleshoot the problem, but I don't really see this as being the plugin's issue. I'll take a look at the stack overflow post later; I can't tend to this until I get some free time so I apologize for the slow response. If this plugin doesn't help you in your particular case, by all means look for alternatives.

[jodriscoll]

It's not a single video, it's 5 separate videos with 5 separate instances on a single page.

Also, in the stackoverflow example I linked you to, they are using far more than just 5 videos on the page.

[jodriscoll]

I just wanted to update this ticket with the new link for this issue. Please find the new landing page with the multiple videos on a single page issue here: http://www.massgeneral.org/heartcenter/ask/default-tubePlayer.aspx

Looking forward to working with you to try and get this to work similar to the Stackoverflow page example. For a quick link, view it here: http://www.edoramedia.com/boxofficeuae/.

[jodriscoll]

Here is my attempt at simplifying everything and making the code a bit more user friendly. However, I'm not able to properly generate the videos. I'm attempting to take the initiative and work this through, however, I'm having difficulties..

www.massgeneral.org/heartcenter/ask/default-tubePlayer-Jared.aspx
www.massgeneral.org/heartcenter/ask/assets/askHeart-tubePlayer-Jared.js

[dmitrif]

This issue is not specific to the plugin itself but rather to your implementation.