Wednesday, March 12th, 2008
YTranscript: Using the brand new YouTube chromeless, scriptable player
Category: JavaScript, Library
I took this API and implemented a simple DSL that allows me to build a simple transcript table of contents that lets you jump to a particular chapter in the video.
The HTML has special attributes and CSS classes, ending up like this:
-
-
<div id="ytplayer" class="ytplayer" url="http://www.youtube.com/v/2SgMHjmZO60"></div>
-
-
<div id="ytranscript" class="ytranscript" for="ytplayer">
-
<b>Click on the item you want to skip too</b>
-
<li starttime="0.0">Hand, hand, fingers, thumb</li>
-
<li starttime="8.0">Drumming and drumming</li>
-
<li starttime="28.0">Time to pick the apples and the plums</li>
-
<li starttime="42.0">Enter Jake</li>
-
<li starttime="44.0">Enter Jack</li>
-
<li starttime="51.0">The monkeys say bye bye</li>
-
-
<li starttime="60.0">Now they play bangos and fiddles</li>
-
<li starttime="78.0">Wooah, millions of monkeys!</li>
-
</ul>
-
</div>
-
My JavaScript trivially attaches behaviour to the list to talk to the player. It adds timing information from the DSL to the HTML content, and uses seekTo to get the player to the point you need.
-
-
window.onload = function() {
-
$$('.ytranscript').each(function(e) {
-
var player = e.readAttribute("for");
-
var playerEmbed = player + "Embed";
-
initPlayer(player, playerEmbed);
-
-
var lis = e.getElementsByTagName("li");
-
var odd = 1;
-
$A(lis).each(function(li) {
-
var starttime = li.readAttribute('starttime');
-
li.innerHTML = li.innerHTML + " <span class='timing'>" + parseInt(starttime) + " secs</span>";
-
li.addClassName( (odd++ % 2) ? "odd" : "even");
-
li.writeAttribute("title", "Send the player to this location");
-
li.onclick = function() {
-
makeSureVideoIsPlaying($(playerEmbed));
-
$(playerEmbed).seekTo(starttime, true);
-
};
-
});
-
});
-
}
-
-
function makeSureVideoIsPlaying(playerEmbed) {
-
if (playerEmbed.getState && $(playerEmbed).getState() == -1) { // -1 unstarted
-
playerEmbed.playVideo(); // play if we haven't started
-
}
-
}
-
-
function initPlayer(player, playerEmbed) {
-
var url = $(player).readAttribute('url');
-
var so = new SWFObject(url + "&enablejsapi=1&playerapiid=my" + playerEmbed, playerEmbed, 432, 400, 8);
-
so.addParam("AllowScriptAccess", "always");
-
so.write(player);
-
}
-
-
function onYouTubePlayerReady(playerId) {}
-
The one gotcha is that seekTo goes to the nearest keyframe, which can be a few seconds off. Hopefully it will at least go to the nearest one before the timing, but that isn't the case right now.
Learn more
We have an interview with the engineers, and a bunch of documentation.
Check out the JavaScript API and chromeless player reference to find out more.
UPDATE: Christian Heilmann has written a video captioning system that lets you annotate as you pause.
Related Content:
Nice to see another Javascript + Flash approach, should encourage people to get creative.
Meh, you still can’t jump forward to a position not yet loaded. And the keyframe thing…
Youtube seriously needs to catch up with other flash players on this.
It does not seem to be very useful because clicking on the video section links does not seem to be working to make the video jump forward.
IMHO YouTube video player is very week because it does not support setting initialTime parameter like Google Video Player. That is used by Google to rewrite the HTML tags of the video player when the user clicks on the links to seek the video to specific positions in seconds.
Once I asked YouTube if they were willing to support initialTime parameter, and they said they were not interested, which is a shame.
Is anyone else having problems with Dion’s example and IE7?
@kim3er, works great in firefox
but yes i too do have problems with it in IE7
shame, this would render this example useless by default.
but still a good start, maybe there is a fix for it. *shrug*
Great stuff,
I do have a slightly different question, I noticed with the ajaxian site that videos from youtube that are embedded into the site load after scrolling to that position in the document.
I am wondering how this is achieved? Is it some sort of javascript that detects if the video is in the viewport? Or is it something else?
Regards Robsworld
@robsworld YouTube had that feature for a while. It is a clever way of lazy loading. The YUI has an own control for that to allow you to only load images when they are visible. http://developer.yahoo.com/yui/imageloader/
Dion, sorry if this is offtopic but currently I am unable to fetch specific VIdeo Feed for a given VideoID. I failed to find any feed which return a single “entry” details.
What do y’all think of the “JW FLV Player” … I use it here to
similar effect in a blog post (by embedding appropriate javascript ahead of wysywyg-output html) — http://nielsmayer.com/roller/NielsMayer/entry/testing_embedding_jw_flv_player
– the one difference I note is that the JW FLV player doesn’t seem
to use times below the “second” increment in it’s javascript API (other than for smil/timed-text captions)) . I guess this makes the cueueing-to-nearest keyframe class of bug more of a feature…
hi, can i use it for videos hostet by googlevideo?