nirvanatikku / jquery-tubeplayer-plugin Goto Github PK

If I do a $playrer.tubeplayer('seek', 100) followed by a $playrer.tubeplayer('play') the player completely reloads. This only seems to happen in the HTML5 version, the Flash version is fine.

I set a default video upon initializing the player via the documentation in the site with no issues, however upon destroying the player and reinitializing, it seems to be loading the default video from the tubeplayer.js (i.e. the sample rap video, and its dimensions) instead of my most recent declared "settings."

I tried re-declaring the defaults = {...} in the hope of replacing the original, but that doesn't work. As of now, I have to copy the entire unminified js and hardcode the changes there - something I'd like to avoid.

What I want is to be able to permanently change a default video (and it's settings) that would be persistent even if the player is destroyed and reinitialised via tubeplayer('destroy') and tubeplayer() respectively.

This is a feature request rather than an issue. It would be great to have an option "repeat" when initializing the player. Once the player reach to the end, if repeat is set to true, it should replay the video from the begining.

What happens on opening a tube-player enabled page on android/ios?

can tube player be wrapped in phonegap? what will happen?

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!

thanks

Does anyone have idea how to remove blue outline on .html-video-container on :focus? i tried something like this

.ytWrapper div:focus,
.ytWrapper div:focus div,
.ytWrapper div:focus iframe{
outline: none !important;
border: none !important;
}

• {
  -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
  }
  .html-video-container:focus{
  outline: none !important;
  }

it does not work, any ideas please?

On line 560 you have:
url.push( "&rel= " + (o.showRelated?1:0) );

Notice the space between the equal and double quote (rel= ")

There should be no space. This means that every other setting after that line also gets ignored.

So if i create a tubeplayer instance in a hidden element and later on it gets shown then none of the API methods work for at least 0.6 seconds. I would suggest to fix it using a queue of the methods that were invoked.

After the first second or so of playback, the video just freezes.
I did try a workaround from 2011 that specified
swfobjectURL: "//ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js",
But that hangs just as quickly.

Any ideas?

The "full" version of tubeplayer uses the specified "protocol" when construction the script tag url, but the minified version seems to have it hard coded.

(search for "player_api" in both versions to see what I'm talking about)

The plugin will work under the mobile browsers? for ex.: iphone browser.. ?

First,
Great work and thank you for contributing this.

o.protocol expects a 'http' or 'https' string. In the base code all the places it's used begin with "://[url]". I prefer to either use the document's protocol or location.protocol. I really can't count on the client having their SSL certs right.

on line 340 could this be added
//remove semi-colon from param ex. location.protocol is used
o.protocol = o.protocol.replace(':', '');

This would leave all the existing functionality intact and allow the use of location.protocol.

As described in the API reference on http://tikku.com/jquery-youtube-tubeplayer-plugin#tubeplayer_tutorial_3
I set the value preferredQuality to 'hd720' but it's loading the normal quality. Overriding every default value to hd720 results in the same.
Any idea what's wrong here? I couldn't find it.

Thanks!

Is it possible to modify or give options to embed the player without getting youtube ads. inside the player.

Hi again @nirvanatikku,

What about a public option like 'onAPIReady' to be bound to 'window.onYouTubeIframeAPIReady' ? So we can have control about the moment when the IframeAPI is fully loaded.

I'm putting here as an Issue because maybe you had forgot about youtube's function onYouTubeIframeAPIReady. I didn't find any reference to it on your code.

Hi! I just noticed that as of today, my YouTube iFrames are appearing with a border (see attached photo):

Note the white border surrounding the video. This didn't appear yesterday.

This can be fixed by adding the seamless='seamless' attribute to the iFrame tag (I think this works for Chrome/Firefox/Safari) and frameBorder="0" for some versions of IE. See this on StackOverflow: http://stackoverflow.com/questions/65034/remove-border-from-iframe

Since the plugin handles the creation of the iFrame, I wonder if an option could be added to set the 'seamless' attribute? I don't have much experience with javascript, but I would be happy to take a crack at it if it's not an easy fix.

In the meantime, I fixed this using CSS:

    iframe {
      background-color: transparent;
      border: 0px none transparent;
      padding: 0px;
      overflow: hidden;
    }

I had test in mobile android, this plugin is did not work properly for chrome browser like firefox. When I click on any playlist, it not show video and not auto play. but on start up if I click play video and click any playlist it show and play video as well. My android 4.1.2 and Chrome v34.

Please test it on http://kamsan70.com

Thank you

While calling jQuery('#player').tubeplayer('play', 'YtiFjPVZKHI'); below error is coming.

TypeError: p.ytplayer.loadVideoById is not a function

p.ytplayer.loadVideoById(param, 0, p.opts.preferredQuality);

I'm at a loss here. I'm looking to get the current play time but i'm having trouble writing the listener bases on something like this.

    var videoData = $('#video').tubeplayer("data");     
    console.log (videoData.duration)

Hi,

How to draw the current frame to an HTML5 canvas element ? I plan to use this plugin only for HTML6...

Thanks

http://apiblog.youtube.com/2012/07/build-compelling-experiences-using.html

To provide a consistent developer experience with the YouTube Upload Widget, we’ve changed the the URL for loading the IFrame Player API code to https://www.youtube.com/iframe_api. The old URL (http://www.youtube.com/player_api) is now deprecated, though it will continue to work. Similarly, the iframe API initialization callback name has been changed to onYouTubeIframeAPIReady from onYouTubePlayerAPIReady, also for consistency with the YouTube Upload Widget. The old callback name, onYouTubePlayerAPIReady, is now deprecated as well. If your app uses both the YouTube Upload Widget as well as the IFrame Player API, you only need to include the script once and handle a single initialization callback.

Hi,
I'm trying to use hooks to trigger events like "play", "stop" etc. but when I click on the "Play video in player" link, for example, nothing happens.

I have made a test to fire the div id ("youtube-player"), hiding it with the code "jQuery("#youtube-player").hide();" and it works.

Below is my code. Would you please suggest me what I'm doing wrong?

(I'm using the TubePlayer latest version, 1.0.4)

Thank you.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML>
<html>
<head>
    <title>jQuery YouTube TubePlayer Plugin</title>
<meta http-equiv="Content-Type" content="text/html" />
<script type="text/javascript" src="jquery17.js"></script>
<script type='text/javascript' src='jQuery.tubeplayer.js'></script>


</head>
<body>

<div id="youtube-player"> </div>



<script>
$(document).ready(function() {

jQuery("#youtube-player").tubeplayer({
    width: 425, // the width of the player
    height: 355, // the height of the player

    allowFullScreen: "true", // true by default, allow user to go full screen
    initialVideo: "dzg1SLu6Yc0", // the video that is loaded into the player
    preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
    onPlay: function(id){}, // after the play method is called
    onPause: function(){}, // after the pause method is called
    onStop: function(){}, // after the player is stopped
    onSeek: function(time){}, // after the video has been seeked to a defined point
    onMute: function(){}, // after the player is muted
    onUnMute: function(){}// after the player is unmuted
});

});
    </script>

    <a href="#" onClick='$("#youtube-player").hide();'> 
    HIDE
</a>

   <br />

<br />
 <a onclick="jQuery('#youtube-player').tubeplayer('stop');" href="javascript:void(0);">jQuery('#youtube-player').tubeplayer('stop');</a>

<br />

<br />

<a href="#" onClick='jQuery("#youtube-player").tubeplayer("play")'>
Play video in player
</a><br />

<br />
<a href="#" onClick='jQuery("#youtube-player").tubeplayer("pause")'>
Pause player
</a><br />

<br />
<a href="#" onClick='jQuery("#youtube-player").tubeplayer("stop")'>
Stop player
</a><br />

<br />
<a href="#" onClick='jQuery("#youtube-player").tubeplayer("mute")'>
Mute player
</a><br />

<br />
<br />
<a href="javascript:void(0);" onclick="jQuery('#youtube-player').tubeplayer('play', 'BW5hHj-QHNI');">
PLAY ANOTHER CLIP
</a>

</body>
</html>

Getter: player.getPlaybackRate():Number
Setter: player.setPlaybackRate(suggestedRate:Number):Void
Data: player.getAvailablePlaybackRates():Array

Refer to https://developers.google.com/youtube/js_api_reference#Playback_rate

Please refer to this page to understand the roots of the issue

http://stackoverflow.com/questions/5144416/embed-video-from-youtube-com-into-iphone-app

We've ran into an issue with some videos.

These videos return some very specific errors that are not described in YT documentation.
For all of those errors the error code is 0 even though the message seen within player is different for some of them.

As an example of these videos please refer to the video: http://www.youtube.com/watch?v=jXO0OoXpuXU

Since all these non-standard errors have same code 0, there should be a way to define generic error handler.

Proposed: add one more possible parameter onError: function(){...} which will be triggered when the code is not matching any known before.

PS: I have already fix for it and ready to send pull request, however i wonder which parameters have been used to minify JS code? Would be the best way to put it into README.md or into the header of uncomressed file as shell command assuming we are currently in the same working directory with uncomressed file (e.g. $ java -jar compiler.jar --js source.js --js_output_file source.min.js)

I am using your great plugin to load 3 videos on a page. Occasionally it will load the 2nd and 3rd videos in the same div for video2. its random, but still a weird issue.

The onPlay function defined in my settings object isn't being called when the player starts for some reason.
I've defined the same callback function for the onPlayerPlaying value and it triggers accordingly, but onPlay doesn't.
Here's an example http://amereservant.kodingen.com/tubeplayer/ which should show an alert when the video is played, but doesn't.

Thanks!

as of today, the code i have been running is ignoring the following parameters.
annotations: false,
showinfo: false,
showRelated: false,
autoPlay: true,
autoHide: true,

Not sure if anything changed.

not sure if google/youtube rolled out something to break this -- but the functions no longer work for me:

$('#player').tubeplayer('play', new_yt_id);

or

$('#player').tubeplayer('cue', new_yt_id);

anyone else? is there a workaround?

Is there a possibility to pass own variables to the url? like:

http://www.youtube.com/watch?v=E73tReMDfjQ&feature=g-all-u&context=G2b2aafbFAAAAAAAAAAA&hd=1
(&hd=1)

Please look at this JS Fiddle demo: http://jsfiddle.net/bJXga/

Try clicking on a video link then before the player starts click another video. If you repeat this you will see that eventually the video that is playing is not the one you clicked on but the previous one.

I think this is a flaw in the design. You cant even destroy a player until the it's ready. In otherwords, you can't change your mind until it's too late. And even then it doesn't remember the destroy command. Basically nothing can be done to the player until it is fully loaded. This is problematic because is user is clicking around quickly, we run into issues like in the demo.

Any suggestions?

Hello,

Look at line 716:

" if(param) { "

As javascript treats 0 as false, when we try to "tubeplayer("volume", 0)" the volume is not set to 0, because the code flow is heading to the else clause.

Would be good replace it for:

" if(typeof(param) !== "undefined") { "

Very nice plugin, by the way!

Hi , It seems like http://tikku.com/jquery-youtube-tubeplayer-plugin is broken.

I have come across a couple videos that don't pause in a simple example I put together:
http://jsfiddle.net/bergonom/VB4Rf/21/

You'll see I have three possible YouTube video IDs in the initialization of the tubeplayer. Two of them won't pause but the third one will.

Any ideas why?

saw this on twitter. basically the YouTube icon can be suppressed in the embedded player

How To Force Subtitles In An Embedded YouTube Video
Posted: 25 Jul 2011 06:30 PM PDT
It’s been about three years since YouTube introduced improved automatic captions for some of the videos; in a year they became more common and last year they were enabled for all English-language videos.

YouTube captioning is the way to help hearing impaired people to understand the videos and, coupled with automatic translation, it can also help non-English people around the world to access the video content. The feature uses Google speech recognition technology to transcript any uploaded video.

The captions are mostly decent-quality (especially in cases when the speaker in a video talks slowly and clearly). Even in cases when the machine fails to fully understand what is being spoken, you will still be able to understand the content of the video.

By default, captions are disabled in an embedded video, however you may want to force the subtitles for one (or both) of the following reasons:

You want to make your video more accessible (especially to hearing-impaired people who are unaware of the option).
You are sharing an English video with non-English-speaking community.
Even if anyone can enable automatic subtitles manually, few people are actually aware of the option, so showing the captions by default would help a lot.

1. Add Subtitles in an Embedded Video (by Default)

Normally, if a user turned on captions once, YouTube will remember it and play subtitles by default until the user turns them off.

What you can do is to change the default settings (show subtitles to users who don’t have the subtitles disabled or are logged out of Google / Youtube).

To enable subtitles by default, you will need to use &cc_load_policy=1 parameter as shown below:

Old-style code:

<param name=”movie” value=”http://www.youtube.com/v/kTvHIDKLFqc?version=3&amp;hl=en_US&amp;&cc_load_policy=1“><embed src=”http://www.youtube.com/v/kTvHIDKLFqc?version=3&amp;hl=en_US&amp;rel=0&cc_load_policy=1” type=”application/x-shockwave-flash” width=”550″ height=”343″ allowscriptaccess=”always” allowfullscreen=”true”>

Iframe (mobile-friendly) code:

hi i was wondering if it was possible to add poster image feature to the script like this http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/ this would be really useful on mobile devices waitng for the iframe to load.

Would it be possible to add a "ready" hook / event for when the player has been loaded and is ready for DOM-manipulation? I'm loading a video, and want to run fitvids.js on its containing element after it's been added.

the .tubeplayer('cue') method doesn't respect the preferredQuality property set in the options.

Hi,

I implemented your plugin and it was working fine.

I was using the onPlayerUnstarted function to display information on my page with javascript.

This was working fine until yesterday but now the onPlayerUnstarted function is simply not firing.
I have debugged and made sure the video is there and can play but the onPlayerUnstarted doesn't get triggered.

I didn't make any changes to my code prior to this happening.

Anyone have any ideas?

Love the plugin by the way!

Wil

There are a couple bugs in tubeplayer regarding the handling of the value 0. For instance, let's say you write the following code:

$("#player").tubeplayer('volume', 0);
}

The output of this call will be 100, indicating that YouTube's volume will be 100, rather than 0. The reason is that, in the definition of $.fn.tubeplayer we see the following line:

return $this.triggerHandler( input+TUBEPLAYER, xtra || null );

If the variable xtra is 0, then 0 || null evaluates to null.

Additionally, in the volume key of the PLAYER object, the branch to use the passed-in parameter runs the following if-statement:

if (param) {

This branch will ignore 0, so a better if-statement would read,

if (param != null) {

This bug prevents tubeplayer from fully encapsulating the JS YouTube API. The API specifies that the volume may be set between 0 and 100. tubeplayer, however, allows the values 1 through 100 instead.

For SEO reasons we have to embed the player into the page on server side.

Unfortunately this breaks player functionality. In case there is already on page which uses the same link to YouTube it is not updating/replacing this video with a new one, nor able to control player through the plugin interfaces.

Hi,

I've been working with this plugin lately. I wanted to use it as HD1080, but preferredQuality does not do it if the iframe is small. Also the hd parameter is deprecated https://developers.google.com/youtube/player_parameters#Deprecated_Parameters . vq=1080 forces player to play on 1080p.

This is more like a request than issue but I'm sure this will help so many people.

Thanks.

Kinda funky that the .tubeplayer('data') method returns 'getVideoEmbedCode' with the value of the embeddable HTML. The intent of this property is really 'videoEmbedCode', so it makes sense to change it.

Just noticed this. Poor parsing

url : http://www.youtube.com/watch?feature=player_embedded&v=DkoeNLuMbcI

videoID : com/watch?feature=player_embedded

I have experienced some weird errorCode when trying to play the following video:

http://www.youtube.com/watch?feature=player_embedded&v=RXcMBGxa_Lo

It retrieves errorCode 0, but theres is no errorCode 0 on the official documentation https://developers.google.com/youtube/js_api_reference?hl=en

Of course i could find my way out to get the proper event fired just adding a "case 0:" on top of "case 101:" inside the switch statement in the 'onError' function.

What would be happening? Could you replicate this error?

In Chrome when I call jQuery('#player').tubeplayer('play', 'YtiFjPVZKHI'); (like on the plugin's home page) it causes a javascript error:

Uncaught TypeError: Cannot read property 'classList' of null (http://s.ytimg.com/yts/jsbin/html5player-vflEMhIP1.js line:193)

Because of this error the video will not load properly

I guess this error is pretty new, I didn't have it before..

How can i create playlist by Youtube_Video_ID?

When I'm hidding video player parent div, player stops. This is observed in mozilla firefox. Second thing is that when I'm set auto start video on page load. Video starts streaming only when player is visible.