/templates/test.html
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)"><- 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)"><- 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)"><- 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>