| Index: trunk/extensions/OggHandler/OggPlayer.js |
| — | — | @@ -14,6 +14,7 @@ |
| 15 | 15 | 'msg': {}, |
| 16 | 16 | 'cortadoUrl' : '', |
| 17 | 17 | 'showPlayerSelect': true, |
| | 18 | + 'controlsHeightGuess': 20, |
| 18 | 19 | |
| 19 | 20 | // Main entry point: initialise a video player |
| 20 | 21 | // Player will be created as a child of the given ID |
| — | — | @@ -84,12 +85,20 @@ |
| 85 | 86 | } |
| 86 | 87 | this.detectionDone = true; |
| 87 | 88 | |
| | 89 | + // navigator.javaEnabled() only tells us about preferences, we need to |
| | 90 | + // search navigator.mimeTypes to see if it's installed |
| | 91 | + var javaEnabled = navigator.javaEnabled(); |
| | 92 | + |
| 88 | 93 | // MSIE VLC |
| 89 | | - try { |
| 90 | | - var vlcObj = new ActiveXObject( "VideoLAN.VLCPlugin.2" ); |
| | 94 | + if ( this.testActiveX( 'VideoLAN.VLCPlugin.2' ) ) { |
| 91 | 95 | this.clientSupports['vlcActiveX'] = true; |
| 92 | | - } catch ( e ) {} |
| | 96 | + } |
| 93 | 97 | |
| | 98 | + // MSIE Java |
| | 99 | + if ( javaEnabled && this.testActiveX( 'JavaPlugin' ) ) { |
| | 100 | + this.clientSupports['cortado'] = true; |
| | 101 | + } |
| | 102 | + |
| 94 | 103 | // <video> element |
| 95 | 104 | elt.innerHTML = '<video id="testvideo"></video>\n'; |
| 96 | 105 | var testvideo = document.getElementById('testvideo'); |
| — | — | @@ -98,6 +107,8 @@ |
| 99 | 108 | } |
| 100 | 109 | |
| 101 | 110 | // Mozilla plugins |
| | 111 | + |
| | 112 | + |
| 102 | 113 | if(navigator.mimeTypes && navigator.mimeTypes.length > 0) { |
| 103 | 114 | for ( var i = 0; i < navigator.mimeTypes.length; i++) { |
| 104 | 115 | var type = navigator.mimeTypes[i].type; |
| — | — | @@ -110,11 +121,24 @@ |
| 111 | 122 | if(navigator.mimeTypes[i].type.indexOf("application/x-vlc-plugin") > -1) { |
| 112 | 123 | this.clientSupports['vlcPlugin'] = true; |
| 113 | 124 | } |
| | 125 | + if (javaEnabled && |
| | 126 | + navigator.mimeTypes[i].type.indexOf("application/x-java-applet") > -1) |
| | 127 | + { |
| | 128 | + this.clientSupports['cortado'] = true; |
| | 129 | + } |
| 114 | 130 | } |
| 115 | 131 | } |
| | 132 | + }, |
| 116 | 133 | |
| 117 | | - // Java |
| 118 | | - this.clientSupports['cortado'] = navigator.javaEnabled(); |
| | 134 | + 'testActiveX' : function ( name ) { |
| | 135 | + var hasObj = true; |
| | 136 | + try { |
| | 137 | + // No IE, not a class called "name", it's a variable |
| | 138 | + var obj = new ActiveXObject( '' + name ); |
| | 139 | + } catch ( e ) { |
| | 140 | + hasObj = false; |
| | 141 | + } |
| | 142 | + return hasObj; |
| 119 | 143 | }, |
| 120 | 144 | |
| 121 | 145 | 'addOption' : function ( select, value, text, selected ) { |
| — | — | @@ -182,7 +206,7 @@ |
| 183 | 207 | 'embedVideoElement': function ( elt, videoUrl, width, height, length ) { |
| 184 | 208 | var videoElt = document.createElement('video'); |
| 185 | 209 | videoElt.setAttribute( 'width', width ); |
| 186 | | - videoElt.setAttribute( 'height', height + 20 ); |
| | 210 | + videoElt.setAttribute( 'height', height + this.controlsHeightGuess ); |
| 187 | 211 | videoElt.setAttribute( 'src', videoUrl ); |
| 188 | 212 | videoElt.setAttribute( 'autoplay', '1' ); |
| 189 | 213 | videoElt.setAttribute( 'controls', '1' ); |
| — | — | @@ -205,13 +229,13 @@ |
| 206 | 230 | "<object id=" + this.hq( id ) + |
| 207 | 231 | " type='application/ogg'" + |
| 208 | 232 | " width=" + this.hq( width ) + |
| 209 | | - " height=" + this.hq( height + 20 ) + |
| | 233 | + " height=" + this.hq( height + this.controlsHeightGuess ) + |
| 210 | 234 | " data=" + this.hq( videoUrl ) + "></object>"; |
| 211 | 235 | }, |
| 212 | 236 | |
| 213 | 237 | 'embedVlcPlugin' : function ( elt, videoUrl, width, height, length ) { |
| 214 | 238 | var id = elt.id + "_obj"; |
| 215 | | - elt.innerHTML += |
| | 239 | + elt.innerHTML += |
| 216 | 240 | "<object id=" + this.hq( id ) + |
| 217 | 241 | " type='application/x-vlc-plugin'" + |
| 218 | 242 | " width=" + this.hq( width ) + |
| — | — | @@ -229,27 +253,41 @@ |
| 230 | 254 | 'embedVlcActiveX' : function ( elt, videoUrl, width, height, length ) { |
| 231 | 255 | var id = elt.id + "_obj"; |
| 232 | 256 | |
| 233 | | - // I ran into some hairy object initialisation issues when trying to |
| 234 | | - // create this object with DOM functions. If anyone knows a better way |
| 235 | | - // than innerHTML, please let me know. -- TS |
| 236 | | - elt.innerHTML += |
| | 257 | + var html = |
| 237 | 258 | '<object id=' + this.hq( id ) + |
| 238 | 259 | ' classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921"' + |
| 239 | 260 | ' codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,8,6,0"' + |
| 240 | 261 | ' width=' + this.hq( width ) + |
| 241 | | - ' height=' + this.hq( height ) + ">" + |
| | 262 | + ' height=' + this.hq( height ) + |
| | 263 | + ' style="width: ' + this.hx( width ) + 'px; height: ' + this.hx( height ) + 'px;"' + |
| | 264 | + ">" + |
| 242 | 265 | '<param name="mrl" value=' + this.hq( videoUrl ) + '/>' + |
| 243 | | - '</object>' ; |
| | 266 | + '</object>'; |
| | 267 | + elt.innerHTML += html; |
| 244 | 268 | |
| 245 | 269 | var videoElt = document.getElementById( id ); |
| | 270 | + |
| | 271 | + // IE says "sorry, I wasn't listening, what were the dimensions again?" |
| | 272 | + if ( width && height ) { |
| | 273 | + videoElt.width = width; |
| | 274 | + videoElt.height = height; |
| | 275 | + videoElt.style.width = width + 'px'; |
| | 276 | + videoElt.style.height = height + 'px'; |
| | 277 | + } |
| | 278 | + |
| 246 | 279 | elt.appendChild( document.createElement( 'br' ) ); |
| 247 | 280 | // TODO: seek bar |
| 248 | | - elt.appendChild( this.newPlayButton( videoElt.playlist ) ); |
| | 281 | + elt.appendChild( this.newButton( 'ogg-play', function() { videoElt.playlist.play(); } ) ); |
| 249 | 282 | // FIXME: playlist.pause() doesn't work |
| 250 | | - elt.appendChild( this.newStopButton( videoElt.playlist ) ); |
| | 283 | + elt.appendChild( this.newButton( 'ogg-stop', function() { videoElt.playlist.stop(); } ) ); |
| 251 | 284 | }, |
| 252 | 285 | |
| 253 | 286 | 'embedCortado' : function ( elt, videoUrl, width, height, length ) { |
| | 287 | + var statusHeight = 18; |
| | 288 | + // Given extra vertical space, cortado centres the video and then overlays the status |
| | 289 | + // line, leaving an ugly black bar at the top. So we don't give it any. |
| | 290 | + var playerHeight = height < statusHeight ? statusHeight : height; |
| | 291 | + |
| 254 | 292 | // Create the applet all at once |
| 255 | 293 | // In Opera, document.createElement('applet') immediately creates |
| 256 | 294 | // a non-working applet with unchangeable parameters, similar to the |
| — | — | @@ -257,14 +295,14 @@ |
| 258 | 296 | elt.innerHTML = |
| 259 | 297 | '<applet code="com.fluendo.player.Cortado.class" ' + |
| 260 | 298 | ' width=' + this.hq( width ) + |
| 261 | | - ' height=' + this.hq( height + 18 ) + |
| | 299 | + ' height=' + this.hq( playerHeight ) + |
| 262 | 300 | ' archive=' + this.hq( this.cortadoUrl ) + '>' + |
| 263 | 301 | ' <param name="url" value=' + this.hq( videoUrl ) + '/>' + |
| 264 | 302 | ' <param name="duration" value=' + this.hq( length ) + '/>' + |
| 265 | 303 | ' <param name="seekable" value="true"/>' + |
| 266 | 304 | ' <param name="autoPlay" value="true"/>' + |
| 267 | 305 | ' <param name="showStatus" value="show"/>' + |
| 268 | | - ' <param name="statusHeight" value="18"/>' + |
| | 306 | + ' <param name="statusHeight" value="' + statusHeight + '"/>' + |
| 269 | 307 | '</applet>'; |
| 270 | 308 | |
| 271 | 309 | // Disable autoPlay in the DOM right now, to prevent Mozilla from |