| Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/kplayerEmbed.js |
| — | — | @@ -13,7 +13,7 @@ |
| 14 | 14 | 'stop' : true, |
| 15 | 15 | 'timeDisplay' : true, |
| 16 | 16 | 'volumeControl' : true, |
| 17 | | - 'overlay' : true, |
| | 17 | + 'overlays' : true, |
| 18 | 18 | 'fullscreen' : false |
| 19 | 19 | }, |
| 20 | 20 | |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/loader.js |
| — | — | @@ -37,6 +37,17 @@ |
| 38 | 38 | // If fullscreen is global enabled. |
| 39 | 39 | 'enableFullscreen' : true, |
| 40 | 40 | |
| | 41 | + // If mwEmbed should use the Native player controls |
| | 42 | + // this will prevent video tag rewriting and skinning |
| | 43 | + // usefull for devices such as iPad / iPod that |
| | 44 | + // don't fully support DOM overlays or don't expose full-screen |
| | 45 | + // functionality to javascript |
| | 46 | + 'nativePlayerControls': false, |
| | 47 | + |
| | 48 | + // If mwembed should use native controls on mobile safari |
| | 49 | + 'nativePlayerControlsMobileSafari' : false, |
| | 50 | + |
| | 51 | + |
| 41 | 52 | // The z-index given to the player interface during full screen ( high z-index ) |
| 42 | 53 | 'fullScreenIndex' : 999998, |
| 43 | 54 | |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/mw.EmbedPlayer.js |
| — | — | @@ -378,7 +378,24 @@ |
| 379 | 379 | case 'audio': |
| 380 | 380 | // By default treat the rewrite request as "video" |
| 381 | 381 | default: |
| 382 | | - var ranPlayerSwapFlag = false; |
| | 382 | + var ranPlayerSwapFlag = false; |
| | 383 | + // Skip the video if we are using native controls |
| | 384 | + if( _this.useNativeControls( element ) ){ |
| | 385 | + // Remove the player loader spiner: |
| | 386 | + $j('#loadSpiner_' + element.id ).remove(); |
| | 387 | + // Unhide |
| | 388 | + $j( element ).css({ |
| | 389 | + 'opacity' : 1, |
| | 390 | + 'position': null |
| | 391 | + } ) |
| | 392 | + .attr('controls', 'true') |
| | 393 | + // iPad needs the video to be hidden then shown |
| | 394 | + // for control attribute update to take effect |
| | 395 | + .hide() |
| | 396 | + .show() |
| | 397 | + |
| | 398 | + return ; |
| | 399 | + } |
| 383 | 400 | // Local callback to runPlayer swap once element has metadata |
| 384 | 401 | function runPlayerSwap() { |
| 385 | 402 | if( ranPlayerSwapFlag ){ |
| — | — | @@ -486,17 +503,18 @@ |
| 487 | 504 | swapPlayerElement[ method ] = playerInterface[ method ]; |
| 488 | 505 | } |
| 489 | 506 | } |
| 490 | | - |
| 491 | | - // Remove the targetElement |
| | 507 | + |
| 492 | 508 | $j( targetElement ).replaceWith( swapPlayerElement ); |
| 493 | 509 | |
| | 510 | + |
| 494 | 511 | // Set swapPlayerElement has height / width set and set to loading: |
| 495 | 512 | $j( swapPlayerElement ).css( { |
| 496 | 513 | 'width' : playerInterface.width + 'px', |
| 497 | 514 | 'height' : playerInterface.height + 'px' |
| 498 | | - } ) |
| 499 | | - //if we don't already have a loadSpiner add one: |
| 500 | | - if( ! $j('#loadSpiner_' + playerInterface.id ).length ){ |
| | 515 | + } ); |
| | 516 | + |
| | 517 | + // If we don't already have a loadSpiner add one: |
| | 518 | + if( $j('#loadSpiner_' + playerInterface.id ).length == 0 ){ |
| 501 | 519 | $j( swapPlayerElement ).append( |
| 502 | 520 | $j('<div style="margin:auto;top:35%;position:relative;width:32px;height:32px;"/>') |
| 503 | 521 | .loadingSpinner() |
| — | — | @@ -507,6 +525,25 @@ |
| 508 | 526 | }, |
| 509 | 527 | |
| 510 | 528 | /** |
| | 529 | + * Checks configuration options |
| | 530 | + * |
| | 531 | + * @param [player] Object Optional player object to check controlls attirbute |
| | 532 | + * @returns bollean true if the mwEmbed player interface should be used |
| | 533 | + * false if the mwEmbed player interace should not be used |
| | 534 | + */ |
| | 535 | + useNativeControls: function( player ) { |
| | 536 | + if( mw.getConfig('nativePlayerControls') == true ) { |
| | 537 | + return true; |
| | 538 | + } |
| | 539 | + if( mw.getConfig('nativePlayerControlsMobileSafari' ) && |
| | 540 | + mw.isMobileSafari() |
| | 541 | + ){ |
| | 542 | + return true; |
| | 543 | + } |
| | 544 | + return false; |
| | 545 | + }, |
| | 546 | + |
| | 547 | + /** |
| 511 | 548 | * Player ready will run the global callbacks |
| 512 | 549 | * once players are "ready" |
| 513 | 550 | * |
| — | — | @@ -2108,18 +2145,11 @@ |
| 2109 | 2146 | |
| 2110 | 2147 | // Set by default thumb value if not found |
| 2111 | 2148 | var posterSrc = ( this.poster ) ? this.poster : |
| 2112 | | - mw.getConfig( 'images_path' ) + 'vid_default_thumb.jpg'; |
| | 2149 | + mw.getConfig( 'images_path' ) + 'vid_default_thumb.jpg'; |
| 2113 | 2150 | |
| 2114 | | - // Remove any old thumbnail items: |
| 2115 | | - $j( this ).find( '.playerPoster,.loadingSpinner,.play-btn-large' ).remove(); |
| 2116 | | - |
| 2117 | | - var dummyvid = document.createElement( "video" ); |
| 2118 | | - // put it all in the div container dc_id |
| 2119 | | - |
| 2120 | 2151 | // Poster support is not very consistant in browsers |
| 2121 | | - // use a jpg poster image: |
| 2122 | | - // use a jpg thumbnail: |
| 2123 | | - $j( this ).append( |
| | 2152 | + // use a jpg poster image: |
| | 2153 | + $j( this ).html( |
| 2124 | 2154 | $j( '<img />' ) |
| 2125 | 2155 | .css({ |
| 2126 | 2156 | 'position' : 'relative', |
| Index: branches/js2-work/phase3/js/mwEmbed/modules/EmbedPlayer/nativeEmbed.js |
| — | — | @@ -43,9 +43,7 @@ |
| 44 | 44 | updateFeatureSupport: function(){ |
| 45 | 45 | // iWhatever devices appear to have a broken |
| 46 | 46 | // dom overlay implementation of video atm. (hopefully iphone OS 4 fixes this ) |
| 47 | | - if ((navigator.userAgent.indexOf('iPhone') != -1) || |
| 48 | | - (navigator.userAgent.indexOf('iPod') != -1) || |
| 49 | | - (navigator.userAgent.indexOf('iPad') != -1)) { |
| | 47 | + if( mw.isMobileSafari() ) { |
| 50 | 48 | this.supports.overlays = false; |
| 51 | 49 | } |
| 52 | 50 | }, |
| — | — | @@ -66,12 +64,12 @@ |
| 67 | 65 | } ) |
| 68 | 66 | .css( { |
| 69 | 67 | 'width' : '100%', |
| 70 | | - 'height' : '100%' |
| 71 | | - } ) |
| | 68 | + 'height' : '100%' |
| | 69 | + } ) |
| 72 | 70 | ) |
| 73 | 71 | mw.log( "Embed code: " + $j( this ).html() ); |
| 74 | 72 | // directly run postEmbedJS ( if playerElement is not avaliable it will retry ) |
| 75 | | - _this.postEmbedJS(); |
| | 73 | + _this.postEmbedJS(); |
| 76 | 74 | }, |
| 77 | 75 | |
| 78 | 76 | /** |
| — | — | @@ -102,6 +100,7 @@ |
| 103 | 101 | vid.play(); |
| 104 | 102 | } |
| 105 | 103 | |
| | 104 | + |
| 106 | 105 | // Run the "hook" for any extensions that need to bind things to the actual video elemnt |
| 107 | 106 | this.runHook( 'postEmbedJS' ) |
| 108 | 107 | |
| Index: branches/js2-work/phase3/js/mwEmbed/mwEmbed.js |
| — | — | @@ -1278,14 +1278,18 @@ |
| 1279 | 1279 | mw.addLoaderDialog = function( msg_txt ) { |
| 1280 | 1280 | mw.addDialog( msg_txt, msg_txt + '<br>' + mw.loading_spinner() ); |
| 1281 | 1281 | } |
| 1282 | | - |
| 1283 | | - /*mw.status = function( status ) |
| | 1282 | + /** |
| | 1283 | + * NOTE: should be moved to browser detection script |
| | 1284 | + */ |
| | 1285 | + mw.isMobileSafari = function(){ |
| | 1286 | + if ((navigator.userAgent.indexOf('iPhone') != -1) || |
| | 1287 | + (navigator.userAgent.indexOf('iPod') != -1) || |
| | 1288 | + (navigator.userAgent.indexOf('iPad') != -1)) { |
| | 1289 | + return true; |
| | 1290 | + } |
| | 1291 | + return false; |
| | 1292 | + }, |
| 1284 | 1293 | |
| 1285 | | - |
| 1286 | | - var Status = function() { |
| 1287 | | - |
| 1288 | | - }*/ |
| 1289 | | - |
| 1290 | 1294 | /** |
| 1291 | 1295 | * Add a (temporary) dialog window: |
| 1292 | 1296 | * @param {String} title Title string for the dialog |