PageRenderTime 20ms CodeModel.GetById 7ms app.highlight 10ms RepoModel.GetById 1ms app.codeStats 0ms

/templates/test.html

http://radioappz.googlecode.com/
HTML | 225 lines | 193 code | 30 blank | 2 comment | 0 complexity | e58d0db0c22fe21d17f3bc5b28589091 MD5 | raw file
  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  4  <head> 
  5    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6    <title> 
  7      YouTube Chromeless Player Example page
  8    </title>
  9    <script src="http://www.google.com/jsapi"></script> 
 10    <script> 
 11      google.load("swfobject", "2.1");
 12    </script> 
 13
 14    <script type="text/javascript"> 
 15 
 16        function updateHTML(elmId, value) {
 17          document.getElementById(elmId).innerHTML = value;
 18        }
 19 
 20        function setytplayerState(newState) {
 21          updateHTML("playerstate", newState);
 22        }
 23 
 24        function onYouTubePlayerReady(playerId) {
 25          ytplayer = document.getElementById("myytplayer");
 26          setInterval(updateytplayerInfo, 250);
 27          updateytplayerInfo();
 28          ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
 29          ytplayer.addEventListener("onError", "onPlayerError");
 30        }
 31 
 32        function onytplayerStateChange(newState) {
 33          setytplayerState(newState);
 34        }
 35 
 36        function onPlayerError(errorCode) {
 37          alert("An error occured: " + errorCode);
 38        }
 39 
 40        function updateytplayerInfo() {
 41          updateHTML("bytesloaded", getBytesLoaded());
 42          updateHTML("bytestotal", getBytesTotal());
 43          updateHTML("videoduration", getDuration());
 44          updateHTML("videotime", getCurrentTime());
 45          updateHTML("startbytes", getStartBytes());
 46          updateHTML("volume", getVolume());
 47        }
 48 
 49        // functions for the api calls
 50        function loadNewVideo(id, startSeconds) {
 51          if (ytplayer) {
 52            ytplayer.loadVideoById(id, parseInt(startSeconds));
 53          }
 54        }
 55 
 56        function cueNewVideo(id, startSeconds) {
 57          if (ytplayer) {
 58            ytplayer.cueVideoById(id, startSeconds);
 59          }
 60        }
 61 
 62        function play() {
 63          if (ytplayer) {
 64            ytplayer.playVideo();
 65          }
 66        }
 67 
 68        function pause() {
 69          if (ytplayer) {
 70            ytplayer.pauseVideo();
 71          }
 72        }
 73 
 74        function stop() {
 75          if (ytplayer) {
 76            ytplayer.stopVideo();
 77          }
 78        }
 79 
 80        function getPlayerState() {
 81          if (ytplayer) {
 82            return ytplayer.getPlayerState();
 83          }
 84        }
 85 
 86        function seekTo(seconds) {
 87          if (ytplayer) {
 88            ytplayer.seekTo(seconds, true);
 89          }
 90        }
 91 
 92        function getBytesLoaded() {
 93          if (ytplayer) {
 94            return ytplayer.getVideoBytesLoaded();
 95          }
 96        }
 97 
 98        function getBytesTotal() {
 99          if (ytplayer) {
100            return ytplayer.getVideoBytesTotal();
101          }
102        }
103 
104        function getCurrentTime() {
105          if (ytplayer) {
106            return ytplayer.getCurrentTime();
107          }
108        }
109 
110        function getDuration() {
111          if (ytplayer) {
112            return ytplayer.getDuration();
113          }
114        }
115 
116        function getStartBytes() {
117          if (ytplayer) {
118            return ytplayer.getVideoStartBytes();
119          }
120        }
121 
122        function mute() {
123          if (ytplayer) {
124            ytplayer.mute();
125          }
126        }
127 
128        function unMute() {
129          if (ytplayer) {
130            ytplayer.unMute();
131          }
132        }
133        
134        function getEmbedCode() {
135          alert(ytplayer.getVideoEmbedCode());
136        }
137 
138        function getVideoUrl() {
139          alert(ytplayer.getVideoUrl());
140        }
141        
142        function setVolume(newVolume) {
143          if (ytplayer) {
144            ytplayer.setVolume(newVolume);
145          }
146        }
147 
148        function getVolume() {
149          if (ytplayer) {
150            return ytplayer.getVolume();
151          }
152        }
153 
154        function clearVideo() {
155          if (ytplayer) {
156            ytplayer.clearVideo();
157          }
158        }
159        
160 
161    </script> 
162  </head> 
163  <body id="page"> 
164    <div> 
165      <p>Click "Load Video" or "Cue Video" below to start playing a video. <br />To play a different
166      video, enter a YouTube video id and click "Load Video" or "Cue Video" again.</p> 
167    <!-- embed the player --> 
168    <div id="ytapiplayer"> 
169      You need Flash player 8+ and JavaScript enabled to view this video.
170    </div> 
171    <script type="text/javascript"> 
172      // <![CDATA[
173 
174      // allowScriptAccess must be set to allow the Javascript from one 
175      // domain to access the swf on the youtube domain
176      var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
177      // this sets the id of the object or embed tag to 'myytplayer'.
178      // You then use this id to access the swf and make calls to the player's API
179      var atts = { id: "myytplayer" };
180      swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer", 
181                         "ytapiplayer", "400", "300", "8", null, null, params, atts);
182      //]]>
183    </script> 
184    
185    <!-- HTML below here is for display of the player info + state --> 
186    <div> 
187      Player state: <span id="playerstate">--</span> 
188    </div> 
189    <br /> 
190      <a href="javascript:void(0);" onclick="play();">Play</a> | <a href="javascript:void(0);" onclick="pause();">Pause</a> | <a href="javascript:void(0);" onclick="stop();">Stop</a> | <a href="javascript:void(0);" onclick="mute();">Mute</a> | <a href="javascript:void(0);" onclick="unMute();">Unmute</a> 
191    <br /><br /> 
192    <form action="" onsubmit="seekTo(document.getElementById('seekto').value); return false;"> 
193      <div><input id="seekto" type="text" size="4" /><input type="submit" value="Seek to" /></div> 
194    </form> 
195    <br /> 
196    <div> 
197      Duration: <span id="videoduration">--:--</span> | Current Time: <span id="videotime">--:--</span> 
198    </div> 
199    <br /> 
200    <div id="bytesdisplay"> 
201      Bytes Total: <span id="bytestotal">--</span> | Start Bytes: <span id="startbytes">--</span> | Bytes Loaded: <span id="bytesloaded">--</span> 
202    </div> 
203    <br /> 
204    <div> 
205      <input type="text" size="11" id="loadvideoid" value="u1zgFlCw8Aw" /> 
206      <a href="javascript:void(0)" onclick="loadNewVideo(document.getElementById('loadvideoid').value, document.getElementById('startseconds').value)">&lt;-
207        Load video</a> | Start at: <input type="text" size="4" id="startseconds" value="0" /> 
208    </div> 
209    <br /> 
210    <div> 
211      <input id="vol" type="text" size="2" /> 
212      <a href="javascript:void(0)" onclick="setVolume(document.getElementById('vol').value)">&lt;- Set Volume</a>  | Volume: <span id="volume">--</span> 
213    </div> 
214    <br /> 
215    <div> 
216      <input type="text" size="11" id="cuevideoid" value="u1zgFlCw8Aw" /> 
217      <a href="javascript:void(0)" onclick="cueNewVideo(document.getElementById('cuevideoid').value, document.getElementById('startseconds2').value)">&lt;- Cue video</a> | Start at: <input type="text" size="4" id="startseconds2" value="0" /> 
218    </div> 
219    <br /> 
220    <div> 
221        <a href="javascript:void(0)" onclick="getEmbedCode()">Get Embed Code</a> | <a href="javascript:void(0)" onclick="getVideoUrl()">Get Video URL</a> | <a href="javascript:void(0);" onclick="clearVideo()">Clear Video</a>  
222    </div> 
223  </div> 
224  </body> 
225</html>