16 Apr
2012
16 Apr
'12
8:06 p.m.
I'm playing around with dynamically extracting YouTube's captions into a
XWiki document via my macro
http://m.nielsmayer.com/bin/view/Macros/YouTubeCaptioner
Examples:
http://m.nielsmayer.com/bin/view/Sandbox/Google+Talk%3A+Mindfulness+with+Jo…
http://m.nielsmayer.com/bin/view/Sandbox/XWiki+-+the+french+open+source+cou…
http://m.nielsmayer.com/bin/view/Macros/YouTubeCaptioner_Test (Steve Jobs
Stanford Commencement Address)
An interesting possibility entailed by the above approach is that XWiki's
annotation system can be used to annotate the extracted deep-links to the
video. Unfortunately, in the first two examples, when annotations are
turned on, the video display disappears.
Any suggestions on having both annotations and YouTube's video player on
the same document at the same time? Seems as if the page gets redisplayed
when annotations get turned on, but the YouTube-suggested "hook" to create
the player out of JavaScript doesn't get called. I changed YouTube's code
to load the YouTube javascript out of XWiki as suggested by
http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI#HDOMEvents2…,
but it didn't help.
Here's my code for the macro YouTubeCaptioner:
---------------------------------
{{velocity}}
{{html}}
<div id="ytplayer"></div>
<script type="text/javascript">
// Load the IFrame Player API code asynchronously. If you load the iframe
// the normal way (
//
http://developers.google.com/youtube/player_parameters#Manual_IFrame_Embeds)
// you get cross-domain-error attempting to retrieve the YouTube player
object
// in JavaScript from parent frame that is in different domain. Some
browsers
// seem stricter than others in enforcing this potential security
exploit, but
// Chrome will definitely prevent it. Instead, must create the player in
// JavaScript (
//
http://developers.google.com/youtube/player_parameters#IFrame_Player_API )
// so that the caption links in the Groovy section below can reference the
// YouTube embedded player as 'player'
//
// NPM: augmented original YouTube suggested init with suggestion from
//
http://platform.xwiki.org/xwiki/bin/view/DevGuide/JavaScriptAPI#HDOMEvents2…
// in the hopes that annotations will display at same time as video
player.
function youtube_init() {
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
(XWiki && XWiki.domIsLoaded && init()) ||
document.observe("xwiki:dom:loaded", youtube_init);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '90%',
videoId: '${xcontext.macro.params.videoId}', //pass in videoID
parameter of macro
cc: '1' //force closed
captions display
});
}
</script>
{{/html}}
##
## Make Groovy-generated HTML Table filterable and sortable in browser via
JavaScript
## http://platform.xwiki.org/xwiki/bin/view/Main/XWikiSyntax#HTables
##
$xwiki.ssfx.use("js/xwiki/table/table.css")
$xwiki.jsfx.use("js/xwiki/table/tablefilterNsort.js", true)
{{/velocity}}
{{groovy}}
import org.apache.commons.lang.StringEscapeUtils;
def url = ("http://www.youtube.com/api/timedtext?v="
+ xcontext.macro.params.videoId //pass in videoID parameter
of macro
+ (xcontext.macro.params.ttOptions ?
xcontext.macro.params.ttOptions : "")
+ "&format=1&lang=en"
).toURL().text;
def root = new XmlSlurper().parseText(url);
println "(% class='grid filterable doOddEven' id='tableid' %)";
println "|=Caption|=Start Time|=Duration";
root.children().each() {
def dec = it.text().replace("\n", "
").replace(">>", "\n####");
//remove linebreaks embedded in captions
dec = StringEscapeUtils.unescapeXml(dec);
println
"|[[{{{${dec}}}}>>path:javascript:player.seekTo(${it.attributes().start},
true);]]|${it.attributes().start}|${it.attributes().dur}";
}
{{/groovy}}
---------------------------------
Also, I've noticed that when selecting items in a table for annotation, you
have to select the entire table-row, in order for the selection to be
displayed successfully. Is this a general feature of XWiki's annotations or
a specific problem caused by my examples, which annotate dynamically
generated content.
-- Niels
http://m.nielsmayer.com <-- my new http://Jelastic.com cloud-hosted XWiki