Wiki code for testing youtube chromeless player API

Hide Line numbers
1: ## -*-mode:Javascript -*-
2: ##############################################################################
3: ## by Niels Mayer -- http://nielsmayer.com
4: ##############################################################################
5: <script type="text/javascript" src="http://nielsmayer.com/embed/swfobject.js"></script>
6: {pre}<script type="text/javascript">
7: /* <![CDATA[ */
8: function onYouTubePlayerReady(playerId) {
9:   ytplayer = document.getElementById(’myytplayer’);
10:   setInterval(updateytplayerInfo, 250);
11:   updateytplayerInfo();
12:   ytplayer.addEventListener(’onStateChange’, ’onytplayerStateChange’);
13:   document.getElementById(’controls’).style.display = ’block’;
14: }
15: function onytplayerStateChange(newState) {
16:     updateHTML("stateshow", newState);
17: }
18: function updateytplayerInfo() {
19:   if (ytplayer) {
20:     updateTimebar();
21:     updateStatusInfo();
22:   }
23: }
24: function updateHTML(elmId, value) { 
25:   document.getElementById(elmId).innerHTML = value;
26: }
27: function updateStatusInfo() {
28:   updateHTML(’stateshow’, ytplayer.getPlayerState());
29:   updateHTML(’elapsedshow’, ytplayer.getCurrentTime().toFixed(2));
30:   updateHTML(’remainingshow’,  (ytplayer.getDuration() - ytplayer.getCurrentTime()).toFixed(2));
31:   updateHTML(’itemshow’, ytplayer.getVideoUrl());
32:   updateHTML(’loadshow’, (100 * ytplayer.getVideoBytesLoaded() / ytplayer.getVideoBytesTotal()).toPrecision(3));
33:   updateHTML(’loadedshow’, ytplayer.getVideoBytesLoaded().toPrecision(5));
34:   updateHTML(’totalshow’, ytplayer.getVideoBytesTotal().toPrecision(5));
35:   updateHTML(’volumeshow’, ytplayer.getVolume().toPrecision(3));
36: }
37: function updateTimebar() {
38:   var all = ytplayer.getDuration();
39:   var part = ytplayer.getCurrentTime();
40:   var percent = getPercent(all, part);
41:   var timebarWidth = 450;
42:   document.getElementById(’timebarIndicator’).style.width = percent * (timebarWidth / 100) + "px";
43:   document.getElementById(’controls’).style.display = ’block’;
44: }
45: function getPercent(all, part) {
46:   return (all > 0) ? (100 / all) * part : 0;
47: }
48: function seekForward(seekTime) {
49:     var newTime = ytplayer.getCurrentTime() + seekTime;
50:     if (newTime < ytplayer.getDuration())
51:        ytplayer.seekTo(newTime, true);
52: }
53: function seekBackward(seekTime) {
54:     var newTime = ytplayer.getCurrentTime() - seekTime;
55:     if (newTime > 0)
56:        ytplayer.seekTo(newTime, true);
57: }
58: /* ]]> */
59: </script>
60: {/pre}
61: 
62: 1.1 Esoteric Agenda in 13 parts via YouTube Chromeless Player API
63: 
64: The thirteen parts of &quot;Esoteric Agenda&quot; which is a wack series of &quot;world government is going to turn our babies into godless communists and then kill them&quot; with a weird anti-pagan slant. It would be an interesting &quot;deep link&quot; hypermedia project to find the source of the given &quot;conspiracy&quot; in the videos above, and the disputes/evidence regarding it. Kind of like the talmud for conspiracy theories. :-) FYI, I stole some code/ideas for this chromeless player app from <a href="http://blogoscoped.com/youtube-api/">This demo</a>.
65: 
66: <table><tbody><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’Cvp5BcICsig’,%200)">Load part 1</a></td><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’FinaDRdh4vc’,%200)">Load part 8</a></td></tr><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’yKOGGnvdBJc’,%200)">Load part 2</a></td><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’4gB1diByETg’,%200)">Load part 9</a></td></tr><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’GA7qTZT9u_E’,%200)">Load part 3</a></td><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’xXInoNc5vV8’,%200)">Load part 10</a></td></tr><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’trYMeaxfabs’,%200)">Load part 4</a></td><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’_RuR1GVpDPg’,%200)">Load part 11</a></td></tr><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’GZ7IEIT2TN4’,%200)">Load part 5</a></td><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’6U3XTX6oql0’,%200)">Load part 12</a></td></tr><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’nGZVqGuGpKw’,%200)">Load part 6</a></td><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’qYie2OoT_6c’,%200)">Load part 13</a></td></tr><tr><td style="width: 50%;"><a href="javascript:ytplayer.loadVideoById(’VNcjsiZNTHM’,%200)">Load part 7</a></td></tr></tbody></table>
67: ##
68: <strong id="itemshow">null</strong>
69: ##
70: <table><tbody><tr><td style="width: 33%;">State:<br /><strong id="stateshow">-1</strong></td><td style="width: 33%;">time elapsed:<br /><strong id="elapsedshow">-0.00</strong> s.</td><td style="width: 33%;">time remaining:<br /><strong id="remainingshow">0.00</strong> s.</td></tr><tr><td style="width: 33%;">percent loaded:<br /><strong id="loadshow">100</strong> percent</td><td style="width: 33%;">bytes loaded/total:<br /><strong id="loadedshow">-1.0000</strong> / <strong id="totalshow">-1.0000</strong></td><td style="width: 33%;">audio volume:<br /><strong id="volumeshow">100</strong> percent</td></tr></tbody></table><table><tbody><tr><td style="width: 16.6%;"><a href="javascript:seekBackward(60)">FBwd</a></td><td style="width: 16.6%;"><a href="javascript:seekBackward(5)">Bwd</a></td><td style="width: 16.6%;"><a href="javascript:ytplayer.pauseVideo()">Pause</a></td><td style="width: 16.6%;"><a href="javascript:ytplayer.playVideo()">Play</a></td><td style="width: 16.6%;"><a href="javascript:seekForward(5)">Fwd</a></td><td style="width: 16.6%;"><a href="javascript:seekForward(60)">FFwd</a></td></tr></tbody></table>
71: ##
72: <div id="ytapiplayer"><object height="500" width="700" type="application/x-shockwave-flash" id="myytplayer" data="http://www.youtube.com/apiplayerbeta?enablejsapi=1&amp;playerapiid=ytplayer"><param value="always" name="allowScriptAccess" /><param value="#D5DDB3" name="bgcolor" /></object></div><div style="display: block;" id="controls" background-color="rgb(213,221,179)" padding="5px" font-size="90%" margin-top="-4px" height="40px" -moz-border-radius="0 0 10px 10px"></div>
73: ##
74: <div id="timebar" position="relative" top="8px" width="450" height="16px" background-color="rgb(0,0,0)" border="1px solid #333" margin-left="auto" margin-right="auto"><img height="16" width="5" style="left: 0px;" alt="|" src="http://nielsmayer.com/embed/timebar-indicator.png" id="timebarIndicator" position="absolute" display="block" left="100" top="0" /></div><div class="explanation" margin-top="20px" font-size="90%">
75: 
76: Look at the [source code for this page>http://nielsmayer.com/xwiki/bin/view/Todo/YoutubeChromelessPlayer?viewer=code] to see how it’s done. Some of the javascript calls you can use are documented in the <a href="http://code.google.com/apis/youtube js_api_reference.html#Functions">Youtube Chromeless Player API</a>.
testing youtube chromeless player API

Top Menu

Wiki code for testing youtube chromeless player API

Search

Navigation:

Recently Modified

Recently Created
