| Index: trunk/extensions/TimedMediaHandler/TimedText/mw.TimedTextEdit.js |
| — | — | @@ -185,7 +185,7 @@ |
| 186 | 186 | $j('#timed-text-file-preview') |
| 187 | 187 | .css({ |
| 188 | 188 | 'width':'100%', |
| 189 | | - 'height': ( $target.find( '.rightcolumn' ).height() - $j('#timed-text-rightcolum-desc').height() ) + 'px' |
| | 189 | + 'height': '300px' |
| 190 | 190 | }); |
| 191 | 191 | |
| 192 | 192 | // Add Select file: |
| — | — | @@ -207,33 +207,33 @@ |
| 208 | 208 | $target.append( |
| 209 | 209 | //Get a little helper input filed to update the language |
| 210 | 210 | $j('<input />') |
| 211 | | - .attr( { |
| 212 | | - 'id' : "timed-text-langKey-input", |
| 213 | | - 'type' : "text", |
| 214 | | - 'maxlength' : "10", |
| 215 | | - 'size' :"3" |
| 216 | | - } ) |
| 217 | | - .change(function() { |
| 218 | | - var langKey = $j(this).val(); |
| 219 | | - if( mw.languages[ langKey ] ) { |
| 220 | | - $buttonTarget.find('.btnText').text( |
| 221 | | - unescape( mw.languages[ langKey ] ) |
| 222 | | - ); |
| 223 | | - } |
| 224 | | - }), |
| | 211 | + .attr( { |
| | 212 | + 'id' : "timed-text-langKey-input", |
| | 213 | + 'type' : "text", |
| | 214 | + 'maxlength' : "10", |
| | 215 | + 'size' :"3" |
| | 216 | + } ) |
| | 217 | + .change(function() { |
| | 218 | + var langKey = $j(this).val(); |
| | 219 | + if( mw.Language.names[ langKey ] ) { |
| | 220 | + $buttonTarget.find('.btnText').text( |
| | 221 | + unescape( mw.Language.names[ langKey ] ) |
| | 222 | + ); |
| | 223 | + } |
| | 224 | + }), |
| 225 | 225 | // Get a jQuery button object with language menu: |
| 226 | 226 | $j.button( { |
| 227 | 227 | 'style': { 'float' : 'left' }, |
| 228 | 228 | 'class': 'language-select-btn', |
| 229 | 229 | 'text': gM('mwe-timedtext-select-language'), |
| 230 | | - 'icon_id': 'triangle-1-e' |
| 231 | | - } ).attr('id', 'language-select') |
| 232 | | - .unbind() |
| 233 | | - .buttonHover() |
| | 230 | + 'icon': 'triangle-1-e' |
| | 231 | + } ) |
| | 232 | + .attr('id', 'language-select') |
| 234 | 233 | ) |
| 235 | 234 | |
| 236 | 235 | |
| 237 | 236 | var $buttonTarget = $target.find('.language-select-btn'); |
| | 237 | + |
| 238 | 238 | // Add menu container: |
| 239 | 239 | var loc = $buttonTarget.position(); |
| 240 | 240 | $target.append( |
| — | — | @@ -242,10 +242,8 @@ |
| 243 | 243 | .attr( 'id', 'upload-language-select' ) |
| 244 | 244 | .loadingSpinner() |
| 245 | 245 | .css( { |
| 246 | | - 'position' : 'absolute', |
| 247 | | - 'z-index' : 10, |
| 248 | | - 'top' : ( loc.top + 40 ) + 'px', |
| 249 | | - 'left' : parseInt( loc.left ) + 'px', |
| | 246 | + 'position' : 'relative', |
| | 247 | + 'z-index' : 10, |
| 250 | 248 | 'height' : '180px', |
| 251 | 249 | 'width' : '180px', |
| 252 | 250 | 'overflow' : 'auto', |
| — | — | @@ -255,11 +253,16 @@ |
| 256 | 254 | .hide() |
| 257 | 255 | ); |
| 258 | 256 | // Add menu binding to button target |
| 259 | | - $buttonTarget.menu( { |
| 260 | | - 'content' : _this.getLanguageList(), |
| 261 | | - 'backLinkText' : gM( 'mwe-timedtext-back-btn' ), |
| 262 | | - 'targetMenuContainer': '#upload-language-select' |
| 263 | | - } ); |
| | 257 | + setTimeout(function(){ |
| | 258 | + $buttonTarget.menu( { |
| | 259 | + 'content' : _this.getLanguageList(), |
| | 260 | + 'backLinkText' : gM( 'mwe-timedtext-back-btn' ), |
| | 261 | + 'targetMenuContainer': '#upload-language-select', |
| | 262 | + 'keepPosition' : true |
| | 263 | + } ); |
| | 264 | + // force the layout ( menu binding does strange things ) |
| | 265 | + $j('#upload-language-select').css( {'left': '315px', 'top' : '87px', 'position' : 'absolute'}); |
| | 266 | + },10); |
| 264 | 267 | |
| 265 | 268 | |
| 266 | 269 | //Add upload input bindings: |
| — | — | @@ -280,9 +283,9 @@ |
| 281 | 284 | var langKey = $j(this).val().split( '.' ); |
| 282 | 285 | var extension = langKey.pop(); |
| 283 | 286 | langKey = langKey.pop(); |
| 284 | | - if( mw.languages[ langKey ] ) { |
| | 287 | + if( mw.Language.names[ langKey ] ) { |
| 285 | 288 | $buttonTarget.find('.btnText').text( |
| 286 | | - unescape( mw.languages[ langKey ] ) |
| | 289 | + unescape( mw.Language.names[ langKey ] ) |
| 287 | 290 | ); |
| 288 | 291 | // Update the key code |
| 289 | 292 | $j('#timed-text-langKey-input').val( langKey ); |
| — | — | @@ -299,10 +302,8 @@ |
| 300 | 303 | $j.button( { |
| 301 | 304 | 'style': { 'float' : 'left' }, |
| 302 | 305 | 'text': gM('mwe-timedtext-upload-text'), |
| 303 | | - 'icon_id': 'disk' |
| | 306 | + 'icon': 'disk' |
| 304 | 307 | } ) |
| 305 | | - .unbind() |
| 306 | | - .buttonHover() |
| 307 | 308 | .click( function() { |
| 308 | 309 | _this.uploadTextFile(); |
| 309 | 310 | }) |
| — | — | @@ -341,22 +342,29 @@ |
| 342 | 343 | buttons[ gM("mwe-timedtext-upload-text-another")] = function() { |
| 343 | 344 | // just close the current dialog: |
| 344 | 345 | $j( this ).dialog('close'); |
| 345 | | - } |
| | 346 | + }; |
| 346 | 347 | buttons[ gM( "mwe-timedtext-upload-text-done-uploading" ) ] = function() { |
| 347 | 348 | window.location.reload(); |
| 348 | | - } |
| | 349 | + }; |
| 349 | 350 | //Edit success |
| 350 | | - mw.addDialog( |
| 351 | | - gM( "mwe-timedtext-upload-text-done"), |
| 352 | | - gM("mwe-timedtext-upload-text-success"), |
| 353 | | - buttons |
| 354 | | - ) |
| | 351 | + setTimeout(function(){ |
| | 352 | + mw.addDialog( { |
| | 353 | + 'width' : '400px', |
| | 354 | + 'title' : gM( "mwe-timedtext-upload-text-done"), |
| | 355 | + 'content' : gM("mwe-timedtext-upload-text-success"), |
| | 356 | + 'buttons' : buttons |
| | 357 | + }); |
| | 358 | + },10 ); |
| 355 | 359 | }else{ |
| 356 | | - mw.addDialog( |
| 357 | | - gM( "mwe-timedtext-upload-text-fail-title"), |
| 358 | | - gM( "mwe-timedtext-upload-text-fail-desc"), |
| 359 | | - 'ok' |
| 360 | | - ) |
| | 360 | + //Edit fail |
| | 361 | + setTimeout(function(){ |
| | 362 | + mw.addDialog({ |
| | 363 | + 'width' : '400px', |
| | 364 | + 'title' : gM( "mwe-timedtext-upload-text-fail-title"), |
| | 365 | + 'content' :gM( "mwe-timedtext-upload-text-fail-desc"), |
| | 366 | + 'buttons' : gM( 'mwe-ok' ) |
| | 367 | + }); |
| | 368 | + },10 ); |
| 361 | 369 | } |
| 362 | 370 | }); |
| 363 | 371 | }) |
| — | — | @@ -377,8 +385,8 @@ |
| 378 | 386 | var _this = this; |
| 379 | 387 | var $langMenu = $j( '<ul>' ); |
| 380 | 388 | // Loop through all supported languages: |
| 381 | | - for ( var langKey in mw.languages ) { |
| 382 | | - var language = mw.languages [ langKey ]; |
| | 389 | + for ( var langKey in mw.Language.names ) { |
| | 390 | + var language = mw.Language.names [ langKey ]; |
| 383 | 391 | var source_icon = 'radio-on'; |
| 384 | 392 | //check if the key is in the _this.parentTimedText source array |
| 385 | 393 | for( var i in _this.parentTimedText.textSources ) { |
| — | — | @@ -396,15 +404,16 @@ |
| 397 | 405 | }, |
| 398 | 406 | getLangMenuItem: function( langKey , source_icon) { |
| 399 | 407 | return $j.getLineItem( |
| 400 | | - langKey + ' - ' + unescape( mw.languages[ langKey ] ), |
| | 408 | + langKey + ' - ' + unescape( mw.Language.names[ langKey ] ), |
| 401 | 409 | source_icon, |
| 402 | | - function() { |
| | 410 | + function() { |
| 403 | 411 | mw.log( "Selected: " + langKey ); |
| 404 | 412 | // Update the input box text |
| 405 | 413 | $j('#timed-text-langKey-input').val( langKey ); |
| 406 | | - // Update the menu item: |
| 407 | | - $j( '#language-select' ).val( unescape( mw.languages[ langKey ] ) ) |
| 408 | | - } ); |
| | 414 | + // Update the menu item: |
| | 415 | + $j('#language-select').find('.btnText').text( unescape( mw.Language.names[ langKey ] ) ) |
| | 416 | + } |
| | 417 | + ); |
| 409 | 418 | }, |
| 410 | 419 | /** |
| 411 | 420 | * Creates the interface dialog container |
| — | — | @@ -433,18 +442,23 @@ |
| 434 | 443 | $j( _this.target_container ).dialog( { |
| 435 | 444 | bgiframe: true, |
| 436 | 445 | autoOpen: true, |
| | 446 | + width: $j(window).width()-50, |
| | 447 | + height: $j(window).height()-50, |
| | 448 | + position : 'center', |
| 437 | 449 | modal: true, |
| 438 | 450 | draggable: false, |
| 439 | 451 | resizable: false, |
| 440 | 452 | buttons: cancelButton, |
| 441 | 453 | close: function() { |
| 442 | | - // if we are 'editing' we should confirm they want to exist: |
| | 454 | + // @@TODO if we are 'editing' we should confirm they want to exist: |
| 443 | 455 | $j( this ).parents( '.ui-dialog' ).fadeOut( 'slow' ); |
| 444 | 456 | } |
| 445 | 457 | } ); |
| | 458 | + // set a non-blocking fit window request |
| | 459 | + setTimeout(function(){ |
| | 460 | + $j( _this.target_container ).dialogFitWindow(); |
| | 461 | + },10); |
| 446 | 462 | |
| 447 | | - $j( _this.target_container ).dialogFitWindow(); |
| 448 | | - |
| 449 | 463 | // Add the window resize hook to keep dialog layout |
| 450 | 464 | $j( window ).resize( function() { |
| 451 | 465 | $j( _this.target_container ).dialogFitWindow(); |
| Index: trunk/extensions/TimedMediaHandler/TimedText/loader.js |
| — | — | @@ -15,6 +15,12 @@ |
| 16 | 16 | } ); |
| 17 | 17 | |
| 18 | 18 | mw.setDefaultConfig( { |
| | 19 | + // If the Timed Text interface should be displayed: |
| | 20 | + // 'always' Displays link and call to contribute always |
| | 21 | + // 'auto' Looks for child timed text elements or "apiTitleKey" & load interface |
| | 22 | + // 'off' Does not display the timed text interface |
| | 23 | + "TimedText.showInterface" : "auto", |
| | 24 | + |
| 19 | 25 | /** |
| 20 | 26 | * If the "add timed text" link / interface should be exposed |
| 21 | 27 | */ |
| — | — | @@ -44,8 +50,8 @@ |
| 45 | 51 | $j( mw ).bind( 'LoaderEmbedPlayerUpdateRequest', function( event, playerElement, classRequest ) { |
| 46 | 52 | |
| 47 | 53 | var mwLoadTimedTextFlag = false; |
| 48 | | - // Check for the textInterface config flag |
| 49 | | - if( mw.getConfig( 'textInterface' ) == 'always' ) { |
| | 54 | + // Check for the TimedText.showInterface config flag |
| | 55 | + if( mw.getConfig( 'TimedText.showInterface' ) == 'always' ) { |
| 50 | 56 | mwLoadTimedTextFlag = true; |
| 51 | 57 | } |
| 52 | 58 | |
| — | — | @@ -65,10 +71,9 @@ |
| 66 | 72 | |
| 67 | 73 | // Add timed text items if flag set. |
| 68 | 74 | // its oky if we merge in multiple times the loader can handle it |
| 69 | | - if( mwLoadTimedTextFlag ) { |
| | 75 | + if( mwLoadTimedTextFlag ) { |
| 70 | 76 | $j.merge( classRequest, mwTimedTextRequestSet ); |
| 71 | 77 | } |
| 72 | | - |
| 73 | 78 | } ); |
| 74 | 79 | |
| 75 | 80 | |
| — | — | @@ -76,6 +81,9 @@ |
| 77 | 82 | mw.addModuleLoader( 'TimedText.Edit', [ |
| 78 | 83 | [ |
| 79 | 84 | '$j.ui', |
| | 85 | + '$j.widget', |
| | 86 | + '$j.ui.mouse', |
| | 87 | + '$j.ui.position', |
| 80 | 88 | '$j.fn.menu', |
| 81 | 89 | "mw.style.jquerymenu", |
| 82 | 90 | |
| Index: trunk/extensions/TimedMediaHandler/TimedText/mw.TimedText.js |
| — | — | @@ -11,36 +11,7 @@ |
| 12 | 12 | * |
| 13 | 13 | */ |
| 14 | 14 | |
| 15 | | -mw.addMessages( { |
| 16 | | - "mwe-timedtext-back-btn" : "Back", |
| 17 | | - "mwe-timedtext-choose-text" : "Chose text", |
| 18 | | - "mwe-timedtext-add-timed-text" : "Add timed text", |
| 19 | | - "mwe-timedtext-loading-text-edit" : "Loading timed text editor", |
| 20 | | - |
| 21 | | - "mwe-timedtext-search" : "Search clip", |
| 22 | | - |
| 23 | | - "mwe-timedtext-layout" : "Layout", |
| 24 | | - "mwe-timedtext-layout-ontop" : "Ontop of video", |
| 25 | | - "mwe-timedtext-layout-below": "Below video", |
| 26 | | - "mwe-timedtext-layout-off" : "Hide subtitles", |
| 27 | | - |
| 28 | | - "mwe-timedtext-loading-text" : "Loading text ...", |
| 29 | | - |
| 30 | | - "mwe-timedtext-key-language": "$1, $2", |
| 31 | | - |
| 32 | | - "mwe-timedtext-textcat-cc" : "Captions", |
| 33 | | - "mwe-timedtext-textcat-sub" : "Subtitles", |
| 34 | | - "mwe-timedtext-textcat-tad" : "Audio description", |
| 35 | | - "mwe-timedtext-textcat-ktv" : "Karaoke", |
| 36 | | - "mwe-timedtext-textcat-tik" : "Ticker text", |
| 37 | | - "mwe-timedtext-textcat-ar" : "Active regions", |
| 38 | | - "mwe-timedtext-textcat-nb" : "Annotation", |
| 39 | | - "mwe-timedtext-textcat-meta" : "Timed metadata", |
| 40 | | - "mwe-timedtext-textcat-trx" : "Transcript", |
| 41 | | - "mwe-timedtext-textcat-lrc" : "Lyrics", |
| 42 | | - "mwe-timedtext-textcat-lin" : "Linguistic markup", |
| 43 | | - "mwe-timedtext-textcat-cue" : "Cue points" |
| 44 | | -} ); |
| | 15 | +mw.includeAllModuleMessages(); |
| 45 | 16 | |
| 46 | 17 | // Bind to mw ( for uncluttered global namespace ) |
| 47 | 18 | ( function( $ ) { |
| — | — | @@ -51,7 +22,7 @@ |
| 52 | 23 | */ |
| 53 | 24 | mw.TimedText = function( embedPlayer, options ) { |
| 54 | 25 | return this.init( embedPlayer, options); |
| 55 | | - } |
| | 26 | + }; |
| 56 | 27 | mw.TimedText.prototype = { |
| 57 | 28 | |
| 58 | 29 | /** |
| — | — | @@ -131,7 +102,7 @@ |
| 132 | 103 | */ |
| 133 | 104 | init: function( embedPlayer, options ) { |
| 134 | 105 | var _this = this; |
| 135 | | - mw.log("TimedText: init() ") |
| | 106 | + mw.log("TimedText: init() "); |
| 136 | 107 | this.embedPlayer = embedPlayer; |
| 137 | 108 | this.options = options; |
| 138 | 109 | |
| — | — | @@ -225,7 +196,7 @@ |
| 226 | 197 | // NOTE: Button target should be an option or config |
| 227 | 198 | $menuButton.unbind().menu( { |
| 228 | 199 | 'content' : _this.getMainMenu(), |
| 229 | | - 'zindex' : mw.getConfig( 'fullScreenIndex' )+2, |
| | 200 | + 'zindex' : mw.getConfig( 'EmbedPlayer.fullScreenZIndex' ) + 2, |
| 230 | 201 | 'crumbDefaultText' : ' ', |
| 231 | 202 | 'autoShow': autoShow, |
| 232 | 203 | 'targetMenuContainer' : _this.menuTarget, |
| — | — | @@ -492,7 +463,7 @@ |
| 493 | 464 | // Close the loader: |
| 494 | 465 | mw.closeLoaderDialog(); |
| 495 | 466 | _this.editText.showUI(); |
| 496 | | - }) |
| | 467 | + }); |
| 497 | 468 | }, |
| 498 | 469 | |
| 499 | 470 | /** |
| — | — | @@ -509,7 +480,7 @@ |
| 510 | 481 | var _this = this; |
| 511 | 482 | return $j.getLineItem( gM( 'mwe-timedtext-add-timed-text'), 'script', function() { |
| 512 | 483 | _this.showTimedTextEditUI( 'add' ); |
| 513 | | - } ) |
| | 484 | + } ); |
| 514 | 485 | }, |
| 515 | 486 | |
| 516 | 487 | /** |
| — | — | @@ -550,7 +521,7 @@ |
| 551 | 522 | if( mw.Language.names[ lang_key ]) { |
| 552 | 523 | return mw.Language.names[ lang_key ]; |
| 553 | 524 | } |
| 554 | | - return false |
| | 525 | + return false; |
| 555 | 526 | }, |
| 556 | 527 | |
| 557 | 528 | /** |
| — | — | @@ -580,7 +551,7 @@ |
| 581 | 552 | function() { |
| 582 | 553 | _this.selectLayout( layoutMode ); |
| 583 | 554 | } ) |
| 584 | | - ) |
| | 555 | + ); |
| 585 | 556 | }); |
| 586 | 557 | return $ul; |
| 587 | 558 | }, |
| — | — | @@ -643,7 +614,7 @@ |
| 644 | 615 | source.load( function() { |
| 645 | 616 | // Refresh the interface: |
| 646 | 617 | _this.refreshDisplay(); |
| 647 | | - }) |
| | 618 | + }); |
| 648 | 619 | }, |
| 649 | 620 | |
| 650 | 621 | /** |
| — | — | @@ -655,7 +626,7 @@ |
| 656 | 627 | // Refresh the Menu (if it has a target to refresh) |
| 657 | 628 | if( this.menuTarget ) { |
| 658 | 629 | mw.log('bind menu refresh display'); |
| 659 | | - this.bindMenu( this.menuTarget, false ) |
| | 630 | + this.bindMenu( this.menuTarget, false ); |
| 660 | 631 | } |
| 661 | 632 | // Issues a "monitor" command to update the timed text for the new layout |
| 662 | 633 | this.monitor(); |
| — | — | @@ -798,12 +769,11 @@ |
| 799 | 770 | $j('<span \>') |
| 800 | 771 | ) |
| 801 | 772 | |
| 802 | | - // If in fullscreen mode update the text size: |
| 803 | | - if( this.embedPlayer.controlBuilder.fullscreenMode ){ |
| 804 | | - $track.css( |
| 805 | | - this.embedPlayer.controlBuilder.getFullscreenTextCss() |
| 806 | | - ); |
| 807 | | - } |
| | 773 | + // Scale the text Relative to player size: |
| | 774 | + $track.css( |
| | 775 | + this.embedPlayer.controlBuilder.getInterfaceSizeTextCss() |
| | 776 | + ); |
| | 777 | + |
| 808 | 778 | $playerTarget.append( $track ); |
| 809 | 779 | // Resize the interface for layoutMode == 'ontop' ( if not in fullscreen ) |
| 810 | 780 | // NOTE this shoudl be a call to controlBuilder not handled here inline |
| — | — | @@ -979,6 +949,7 @@ |
| 980 | 950 | if( time >= caption.start && |
| 981 | 951 | time <= caption.end ) { |
| 982 | 952 | this.prevIndex = i; |
| | 953 | + //mw.log("Start cap time: " + caption.start + ' End time: ' + caption.end ); |
| 983 | 954 | return caption.content; |
| 984 | 955 | } |
| 985 | 956 | } |
| — | — | @@ -1194,7 +1165,9 @@ |
| 1195 | 1166 | loadTitleKey: function( titleKey, callback ) { |
| 1196 | 1167 | var request = { |
| 1197 | 1168 | 'action': 'parse', |
| 1198 | | - 'page': titleKey |
| | 1169 | + 'page': titleKey, |
| | 1170 | + 'smaxage' : 300, |
| | 1171 | + 'maxage' : 300 |
| 1199 | 1172 | }; |
| 1200 | 1173 | mw.getJSON( this.apiUrl, request, function( data ) { |
| 1201 | 1174 | if ( data && data.parse && data.parse.text['*'] ) { |
| — | — | @@ -1238,7 +1211,9 @@ |
| 1239 | 1212 | 'apprefix' : titleKey, |
| 1240 | 1213 | 'apnamespace' : this.getTimedTextNS(), |
| 1241 | 1214 | 'aplimit' : 200, |
| 1242 | | - 'prop':'revisions' |
| | 1215 | + 'prop':'revisions', |
| | 1216 | + 'smaxage' : 300, |
| | 1217 | + 'maxage' : 300 |
| 1243 | 1218 | }; |
| 1244 | 1219 | mw.getJSON( this.apiUrl, request, function( sourcePages ) { |
| 1245 | 1220 | // If "timedText" is not a valid namespace try "just" with prefix: |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/mw.EmbedPlayer.js |
| — | — | @@ -7,70 +7,15 @@ |
| 8 | 8 | * mw.PlayerControlBuilder Handles skinning of the player controls |
| 9 | 9 | */ |
| 10 | 10 | |
| 11 | | -mw.addMessages( { |
| 12 | | - "mwe-embedplayer-loading_plugin" : "Loading plugin ...", |
| 13 | | - "mwe-embedplayer-select_playback" : "Set playback preference", |
| 14 | | - "mwe-embedplayer-link_back" : "Link back", |
| 15 | | - "mwe-embedplayer-error_swap_vid" : "Error: mwEmbed was unable to swap the video tag for the mwEmbed interface", |
| 16 | | - "mwe-embedplayer-add_to_end_of_sequence" : "Add to end of sequence", |
| 17 | | - "mwe-embedplayer-missing_video_stream" : "The video file for this stream is missing", |
| 18 | | - "mwe-embedplayer-play_clip" : "Play clip", |
| 19 | | - "mwe-embedplayer-pause_clip" : "Pause clip", |
| 20 | | - "mwe-embedplayer-volume_control" : "Volume control", |
| 21 | | - "mwe-embedplayer-player_options" : "Player options", |
| 22 | | - "mwe-embedplayer-timed_text" : "Timed text", |
| 23 | | - "mwe-embedplayer-player_fullscreen" : "Fullscreen", |
| 24 | | - "mwe-embedplayer-next_clip_msg" : "Play next clip", |
| 25 | | - "mwe-embedplayer-prev_clip_msg" : "Play previous clip", |
| 26 | | - "mwe-embedplayer-current_clip_msg" : "Continue playing this clip", |
| 27 | | - "mwe-embedplayer-seek_to" : "Seek $1", |
| 28 | | - "mwe-embedplayer-paused" : "paused", |
| 29 | | - "mwe-embedplayer-download_segment" : "Download selection:", |
| 30 | | - "mwe-embedplayer-download_full" : "Download full video file:", |
| 31 | | - "mwe-embedplayer-download_right_click" : "To download, right click and select <i>Save link as...<\/i>", |
| 32 | | - "mwe-embedplayer-download_clip" : "Download video", |
| 33 | | - "mwe-embedplayer-download_text" : "Download text", |
| 34 | | - "mwe-embedplayer-download" : "Download", |
| 35 | | - "mwe-embedplayer-share" : "Share", |
| 36 | | - "mwe-embedplayer-credits" : "Credits", |
| 37 | | - "mwe-embedplayer-clip_linkback" : "Clip source page", |
| 38 | | - "mwe-embedplayer-choose_player" : "Choose video player", |
| 39 | | - "mwe-embedplayer-no-player" : "No player available for $1", |
| 40 | | - "mwe-embedplayer-share_this_video" : "Share this video", |
| 41 | | - "mwe-embedplayer-video_credits" : "Video credits", |
| 42 | | - "mwe-embedplayer-kaltura-platform-title" : "Kaltura open source video platform", |
| 43 | | - "mwe-embedplayer-menu_btn" : "Menu", |
| 44 | | - "mwe-embedplayer-close_btn" : "Close", |
| 45 | | - "mwe-embedplayer-ogg-player-vlc-player" : "VLC player", |
| 46 | | - "mwe-embedplayer-ogg-player-oggNative" : "HTML5 Ogg player", |
| 47 | | - "mwe-embedplayer-ogg-player-h264Native" : "HTML5 H.264 player", |
| 48 | | - "mwe-embedplayer-ogg-player-oggPlugin" : "Generic Ogg plugin", |
| 49 | | - "mwe-embedplayer-ogg-player-quicktime-mozilla" : "QuickTime plugin", |
| 50 | | - "mwe-embedplayer-ogg-player-quicktime-activex" : "QuickTime ActiveX", |
| 51 | | - "mwe-embedplayer-ogg-player-cortado" : "Java Cortado", |
| 52 | | - "mwe-embedplayer-ogg-player-flowplayer" : "Flowplayer", |
| 53 | | - "mwe-embedplayer-ogg-player-kplayer" : "Kaltura player", |
| 54 | | - "mwe-embedplayer-ogg-player-selected" : "(selected)", |
| 55 | | - "mwe-embedplayer-generic_missing_plugin" : "You browser does not appear to support the following playback type: <b>$1<\/b><br \/>Visit the <a href=\"http:\/\/commons.wikimedia.org\/wiki\/Commons:Media_help\">Playback methods<\/a> page to download a player.<br \/>", |
| 56 | | - "mwe-embedplayer-missing-source" : "No source video was found. Check that your embed code includes a valid source or API key", |
| 57 | | - "mwe-embedplayer-for_best_experience" : "For a better video playback experience we recommend the <b><a href=\"http:\/\/www.mozilla.com\/en-US\/firefox\/upgrade.html?from=mwEmbed\">latest Firefox<\/a>.<\/b>", |
| 58 | | - "mwe-embedplayer-do_not_warn_again" : "Dismiss for now.", |
| 59 | | - "mwe-embedplayer-playerSelect" : "Players", |
| 60 | | - "mwe-embedplayer-read_before_embed" : "<a href=\"http:\/\/mediawiki.org\/wiki\/Security_Notes_on_Remote_Embedding\" target=\"_new\">Read this<\/a> before embedding.", |
| 61 | | - "mwe-embedplayer-embed_site_or_blog" : "Embed on a page", |
| 62 | | - "mwe-embedplayer-related_videos" : "Related videos", |
| 63 | | - "mwe-embedplayer-seeking" : "seeking", |
| 64 | | - "mwe-embedplayer-copy-code" : "Copy code", |
| 65 | | - "mwe-embedplayer-video-h264" : "H.264 video", |
| 66 | | - "mwe-embedplayer-video-flv" : "Flash video", |
| 67 | | - "mwe-embedplayer-video-ogg" : "Ogg video", |
| 68 | | - "mwe-embedplayer-video-audio" : "Ogg audio" |
| 69 | | -} ); |
| 70 | | - |
| | 11 | +/** |
| | 12 | + * Add the messages text: |
| | 13 | + */ |
| | 14 | + |
| | 15 | +mw.includeAllModuleMessages(); |
| 71 | 16 | /* |
| 72 | 17 | * The default video attributes supported by embedPlayer |
| 73 | 18 | */ |
| 74 | | -mw.setConfig( 'embedPlayerAttributes', { |
| | 19 | +mw.setDefaultConfig( 'EmbedPlayer.Attributes', { |
| 75 | 20 | /* |
| 76 | 21 | * Base html element attributes: |
| 77 | 22 | */ |
| — | — | @@ -89,7 +34,7 @@ |
| 90 | 35 | * also see: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html |
| 91 | 36 | */ |
| 92 | 37 | |
| 93 | | - // Media src URI, can be relative or absolute URI |
| | 38 | + // Media src URI, can be relative or absolute URI |
| 94 | 39 | "src" : null, |
| 95 | 40 | |
| 96 | 41 | // Poster attribute for displaying a place holder image before loading or playing the video |
| — | — | @@ -158,10 +103,16 @@ |
| 159 | 104 | // The apiProvider where to lookup the title key |
| 160 | 105 | "apiProvider" : null, |
| 161 | 106 | |
| 162 | | - // If the player controls should be overlayed |
| 163 | | - //( Global default via config overlayControls in module loader.js) |
| 164 | | - "overlayControls" : true, |
| | 107 | + // If the player controls should be overlaid |
| | 108 | + //( Global default via config EmbedPlayer.OverlayControls in module loader.js) |
| | 109 | + "overlaycontrols" : true, |
| 165 | 110 | |
| | 111 | + // Attribute to use 'native' controls |
| | 112 | + "usenativecontrols" : false, |
| | 113 | + |
| | 114 | + // If the player should include an attribution button: |
| | 115 | + 'attributionbutton' : true, |
| | 116 | + |
| 166 | 117 | // ROE url ( for xml based metadata ) |
| 167 | 118 | // also see: http://wiki.xiph.org/ROE |
| 168 | 119 | "roe" : null, |
| — | — | @@ -180,14 +131,15 @@ |
| 181 | 132 | "download_link" : true, |
| 182 | 133 | |
| 183 | 134 | // Content type of the media |
| 184 | | - "type" : null |
| | 135 | + "type" : null |
| 185 | 136 | }); |
| 186 | 137 | |
| | 138 | + |
| 187 | 139 | /** |
| 188 | 140 | * The base source attribute checks |
| 189 | 141 | * also see: http://dev.w3.org/html5/spec/Overview.html#the-source-element |
| 190 | 142 | */ |
| 191 | | -mw.setConfig( 'embedPlayerSourceAttributes', [ |
| | 143 | +mw.setDefaultConfig( 'embedPlayerSourceAttributes', [ |
| 192 | 144 | // source id |
| 193 | 145 | 'id', |
| 194 | 146 | |
| — | — | @@ -246,7 +198,7 @@ |
| 247 | 199 | * @param {Function} callback Function to call once embedding is done |
| 248 | 200 | */ |
| 249 | 201 | $.embedPlayers = function( attributes, callback) { |
| 250 | | - $j( mw.getConfig( 'rewritePlayerTags' ) ).embedPlayer( attributes, callback ); |
| | 202 | + $j( mw.getConfig( 'EmbedPlayer.RewriteTags' ) ).embedPlayer( attributes, callback ); |
| 251 | 203 | }; |
| 252 | 204 | |
| 253 | 205 | /** |
| — | — | @@ -254,22 +206,65 @@ |
| 255 | 207 | * |
| 256 | 208 | * Rewrites all tags via a given selector |
| 257 | 209 | * |
| 258 | | - * @param {Object} attributes [ Optional ] The embedPlayer options for the given video interface. |
| 259 | | - * Attributes Object can inclued any key value pair that would otherwise be |
| | 210 | + * @param {object=} attributes Optional embedPlayer attributes for the given video interface. |
| | 211 | + * Attributes Object can include any key value pair that would otherwise be |
| 260 | 212 | * an attribute in the html element. |
| 261 | 213 | * |
| 262 | | - * also see: mw.getConfig( 'embedPlayerAttributes' ) |
| | 214 | + * also see: mw.getConfig( 'EmbedPlayer.Attributes' ) |
| 263 | 215 | * |
| 264 | | - * @param {Function} callback [ Optional ] Function to be called once video interfaces are ready |
| | 216 | + * @param {Function=} callback Optional Function to be called once video interfaces are ready |
| 265 | 217 | * |
| 266 | 218 | */ |
| 267 | 219 | $.fn.embedPlayer = function( attributes, callback ) { |
| 268 | | - var playerSelect = this.selector; |
| | 220 | + mw.log( 'EmbedPlayer:: fn.embedPlayer' ); |
| | 221 | + var playerSelect = this.selector; |
| | 222 | + |
| | 223 | + // Define attributes if unset |
| | 224 | + if( !attributes ) { |
| | 225 | + attributes = {}; |
| | 226 | + } |
| | 227 | + |
| 269 | 228 | // Handle optional include of attributes argument: |
| 270 | 229 | if( typeof attributes == 'function' ){ |
| 271 | | - callback = attributes; |
| | 230 | + callback = attributes; |
| | 231 | + attributes = {}; |
| 272 | 232 | } |
| 273 | 233 | |
| | 234 | + $j( playerSelect ).each( function( index, playerElement) { |
| | 235 | + // make sure the playerElement has an id: |
| | 236 | + if( $j( playerElement ).attr('id') =='' ){ |
| | 237 | + $j( playerElement ).attr( "id", 'mwe_v' + ( index ) ); |
| | 238 | + } |
| | 239 | + |
| | 240 | + // If we are dynamically embedding on a "div" check if we can |
| | 241 | + // add a poster image behind the loader: |
| | 242 | + if( playerElement.nodeName.toLowerCase() == 'div' |
| | 243 | + && ( attributes.poster || $j(playerElement).attr( 'poster' ) ) ){ |
| | 244 | + var posterSrc = ( attributes.poster ) ? attributes.poster : $j(playerElement).attr( 'poster' ); |
| | 245 | + |
| | 246 | + // Set image size: |
| | 247 | + var width = $j( playerElement ).width(); |
| | 248 | + var height = $j( playerElement ).height(); |
| | 249 | + if( !width ){ |
| | 250 | + var width = ( attributes.width )? attributes.width : '100%'; |
| | 251 | + } |
| | 252 | + if( !height ){ |
| | 253 | + var height = ( attributes.height )? attributes.height : '100%'; |
| | 254 | + } |
| | 255 | + |
| | 256 | + mw.log('EmbedPlayer:: set loading background: ' + posterSrc); |
| | 257 | + $j( playerElement ).append( |
| | 258 | + $j( '<img />' ) |
| | 259 | + .attr( 'src', posterSrc) |
| | 260 | + .css({ |
| | 261 | + 'position' : 'absolute', |
| | 262 | + 'width' : width, |
| | 263 | + 'height' : height |
| | 264 | + }) |
| | 265 | + ) |
| | 266 | + } |
| | 267 | + }); |
| | 268 | + |
| 274 | 269 | // If we have not detected browser plugin embed types do that now |
| 275 | 270 | if( ! mw.EmbedTypes.players ){ |
| 276 | 271 | mw.EmbedTypes.init(); |
| — | — | @@ -277,28 +272,36 @@ |
| 278 | 273 | |
| 279 | 274 | // Create the Global Embed Player Manager ( if not already created ) |
| 280 | 275 | if( ! mw.playerManager ) { |
| 281 | | - mw.log( "Create the player manager:" ); |
| | 276 | + mw.log( "EmbedPlayer::Create the player manager:" ); |
| 282 | 277 | mw.playerManager = new EmbedPlayerManager(); |
| 283 | 278 | // Run the global hooks that mw.playerManager is ready |
| 284 | | - mw.log( 'trigger: EmbedPlayerManagerReady'); |
| | 279 | + mw.log( 'EmbedPlayer::trigger: EmbedPlayerManagerReady'); |
| 285 | 280 | $j( mw ).trigger( 'EmbedPlayerManagerReady' ); |
| 286 | | - } |
| 287 | | - |
| 288 | | - // Add the embedPlayer ready callback |
| 289 | | - if( typeof callback == 'function' ){ |
| 290 | | - mw.playerManager.addCallback( callback ); |
| 291 | | - } |
| | 281 | + } |
| | 282 | + var addedToPlayerManager = false; |
| 292 | 283 | // Make sure we have user preference setup ( for setting preferences on video selection ) |
| 293 | | - mw.setupUserConfig( function() { |
| | 284 | + mw.setupUserConfig( function() { |
| | 285 | + mw.log("EmbedPlayer:: found: " + $j( playerSelect ).length + ' players '); |
| 294 | 286 | // Add each selected element to the player manager: |
| 295 | | - $j( playerSelect ).each( function( index, playerElement) { |
| 296 | | - // make sure the video tag was not generated by our own native player: |
| | 287 | + $j( playerSelect ).each( function( index, playerElement) { |
| | 288 | + // Make sure the video tag was not generated by our library: |
| 297 | 289 | if( $j( playerElement ).hasClass( 'nativeEmbedPlayerPid' ) ){ |
| 298 | | - mw.log( '$j.embedPlayer skip native player: ' + playerElement ); |
| | 290 | + $j('#loadingSpinner_' + $j( playerElement ).attr('id') ).hide(); |
| | 291 | + mw.log( 'EmbedPlayer::$j.embedPlayer skip embedPlayer gennerated video: ' + playerElement ); |
| 299 | 292 | } else { |
| | 293 | + addedToPlayerManager = true; |
| | 294 | + // Add the embedPlayer ready callback |
| | 295 | + mw.playerManager.addCallback( callback ); |
| | 296 | + // Add the player |
| 300 | 297 | mw.playerManager.addElement( playerElement, attributes); |
| 301 | | - } |
| 302 | | - } ); |
| | 298 | + } |
| | 299 | + |
| | 300 | + } ); |
| | 301 | + // run the callback directly if no players were added to the playerManager |
| | 302 | + if( !addedToPlayerManager && callback ){ |
| | 303 | + callback(); |
| | 304 | + } |
| | 305 | + |
| 303 | 306 | }) |
| 304 | 307 | }; |
| 305 | 308 | |
| — | — | @@ -318,6 +321,8 @@ |
| 319 | 322 | // Functions to run after the video interface is ready |
| 320 | 323 | callbackFunctions : null, |
| 321 | 324 | |
| | 325 | + playerElementQueue: [], |
| | 326 | + |
| 322 | 327 | /** |
| 323 | 328 | * Constructor initializes callbackFunctions and playerList |
| 324 | 329 | */ |
| — | — | @@ -333,7 +338,9 @@ |
| 334 | 339 | * @param {Function} callback Function to be called once players are ready |
| 335 | 340 | */ |
| 336 | 341 | addCallback: function( callback ) { |
| 337 | | - this.callbackFunctions.push( callback ); |
| | 342 | + if( typeof callback == 'function' ){ |
| | 343 | + this.callbackFunctions.push( callback ); |
| | 344 | + } |
| 338 | 345 | }, |
| 339 | 346 | |
| 340 | 347 | /** |
| — | — | @@ -369,82 +376,98 @@ |
| 370 | 377 | playerElement.id = 'vid' + ( this.playerList.length + 1 ); |
| 371 | 378 | } |
| 372 | 379 | mw.log('EmbedPlayerManager: addElement:: ' + playerElement.id ); |
| 373 | | - |
| | 380 | + |
| 374 | 381 | // Add the element id to playerList |
| 375 | 382 | this.playerList.push( playerElement.id ); |
| 376 | 383 | |
| 377 | 384 | // Check for player attributes such as skins or plugins attributes |
| 378 | 385 | // that add to the request set |
| 379 | | - var playerDependencyRequest = [ ]; |
| | 386 | + var playerDependencyRequest = []; |
| 380 | 387 | |
| | 388 | + // merge in any custom attributes |
| | 389 | + $j.extend( playerElement, attributes ); |
| | 390 | + |
| 381 | 391 | // Update the list of dependent libraries for the player |
| 382 | 392 | // ( allows extensions to add to the dependency list ) |
| 383 | 393 | mw.embedPlayerUpdateLibraryRequest( playerElement, playerDependencyRequest ); |
| 384 | | - |
| | 394 | + |
| 385 | 395 | // Load any skins we need then swap in the interface |
| 386 | | - mw.load( playerDependencyRequest, function() { |
| 387 | | - // We should move all playlist handling to add-in |
| 388 | | - switch( playerElement.tagName.toLowerCase() ) { |
| 389 | | - case 'video': |
| 390 | | - case 'audio': |
| 391 | | - // By default treat the rewrite request as "video" |
| 392 | | - default: |
| 393 | | - var waitForMeta = true; |
| 394 | | - |
| 395 | | - // Let extensions determine if its worthwhile to wait for metadata: |
| 396 | | - // We pass an object to the trigger to preserve reference values |
| 397 | | - var eventObject = { |
| 398 | | - 'playerElement':playerElement, |
| 399 | | - 'waitForMeta' : waitForMeta |
| 400 | | - } |
| 401 | | - |
| 402 | | - $j( mw ).trigger( 'addElementWaitForMetaEvent', eventObject ); |
| 403 | | - // update the waitForMeta |
| 404 | | - waitForMeta = eventObject['waitForMeta']; |
| 405 | | - |
| 406 | | - |
| 407 | | - // Set the wait for meta flag if unset by extension |
| 408 | | - if( waitForMeta ){ |
| 409 | | - waitForMeta = _this.waitForMetaCheck( playerElement ); |
| 410 | | - } |
| | 396 | + mw.load( playerDependencyRequest, function() { |
| | 397 | + var waitForMeta = true; |
| 411 | 398 | |
| 412 | | - var ranPlayerSwapFlag = false; |
| 413 | | - |
| 414 | | - // Local callback to runPlayer swap once playerElement has metadata |
| 415 | | - function runPlayerSwap() { |
| 416 | | - if( ranPlayerSwapFlag ){ |
| 417 | | - return ; |
| | 399 | + // Be sure to "stop" the target ( sometimes firefox keeps playing the video even |
| | 400 | + // though its been removed from the DOM ) |
| | 401 | + if( playerElement.pause ){ |
| | 402 | + playerElement.pause(); |
| | 403 | + } |
| | 404 | + |
| | 405 | + |
| | 406 | + // Let extensions determine if its worthwhile to wait for metadata: |
| | 407 | + // We pass an object to the trigger to preserve reference values |
| | 408 | + var eventObject = { |
| | 409 | + 'playerElement' : playerElement, |
| | 410 | + 'waitForMeta' : waitForMeta |
| | 411 | + }; |
| | 412 | + $j( mw ).trigger( 'addElementWaitForMetaEvent', eventObject ); |
| | 413 | + |
| | 414 | + // update the waitForMeta |
| | 415 | + waitForMeta = eventObject[ 'waitForMeta' ]; |
| | 416 | + |
| | 417 | + |
| | 418 | + // Set the wait for meta flag if unset by extension |
| | 419 | + if( waitForMeta ){ |
| | 420 | + waitForMeta = _this.waitForMetaCheck( playerElement ); |
| | 421 | + } |
| | 422 | + |
| | 423 | + var ranPlayerSwapFlag = false; |
| | 424 | + |
| | 425 | + // Local callback to runPlayer swap once playerElement has metadata |
| | 426 | + function runPlayerSwap() { |
| | 427 | + if( ranPlayerSwapFlag ){ |
| | 428 | + return ; |
| | 429 | + } |
| | 430 | + ranPlayerSwapFlag = true; |
| | 431 | + mw.log("EmbedPlayer::runPlayerSwap::" + $j( playerElement ).attr('id') ); |
| | 432 | + |
| | 433 | + var playerInterface = new mw.EmbedPlayer( playerElement , attributes); |
| | 434 | + var swapPlayer = _this.swapEmbedPlayerElement( playerElement, playerInterface ); |
| | 435 | + |
| | 436 | + // Copy over any data attributes from the playerElement |
| | 437 | + if( mw.getConfig( 'EmbedPlayer.DataAttributes' ) ) { |
| | 438 | + var dataAttr = mw.getConfig( 'EmbedPlayer.DataAttributes' ) |
| | 439 | + for( var i in dataAttr ){ |
| | 440 | + if( $j( playerElement ).data( i ) ){ |
| | 441 | + $j( '#' + playerInterface.id ).data( i, $j( playerElement ).data( i ) ); |
| 418 | 442 | } |
| 419 | | - mw.log("runPlayerSwap::" + $j( playerElement ).attr('id') ); |
| 420 | | - ranPlayerSwapFlag = true; |
| 421 | | - var playerInterface = new mw.EmbedPlayer( playerElement , attributes); |
| 422 | | - |
| 423 | | - _this.swapEmbedPlayerElement( playerElement, playerInterface ); |
| 424 | | - |
| 425 | | - |
| 426 | | - // Pass the id to any hook that needs to interface prior to checkPlayerSources |
| 427 | | - mw.log("addElement :: trigger :: newEmbedPlayerEvent"); |
| 428 | | - $j( mw ).trigger ( 'newEmbedPlayerEvent', playerInterface.id ); |
| 429 | | - |
| 430 | | - // Issue the checkPlayerSources call to the new player interface: |
| 431 | | - // make sure to use the element that is in the DOM: |
| 432 | | - $j( '#' + playerInterface.id ).get(0).checkPlayerSources(); |
| 433 | 443 | } |
| 434 | | - |
| 435 | | - if( waitForMeta ) { |
| 436 | | - mw.log('DO WaitForMeta ( video missing height (' + $j( playerElement ).attr('height') + '), width (' + $j( playerElement ).attr('width') + ') or duration' ); |
| 437 | | - playerElement.removeEventListener( "loadedmetadata", runPlayerSwap, true ); |
| 438 | | - playerElement.addEventListener( "loadedmetadata", runPlayerSwap, true ); |
| 439 | | - |
| 440 | | - // Time-out of 5 seconds ( maybe still playable but no timely metadata ) |
| 441 | | - setTimeout( runPlayerSwap, 5000 ); |
| 442 | | - return ; |
| 443 | | - } else { |
| 444 | | - runPlayerSwap(); |
| 445 | | - return ; |
| 446 | | - } |
| 447 | | - break; |
| 448 | | - } |
| | 444 | + } |
| | 445 | + |
| | 446 | + // Pass the id to any hook that needs to interface prior to checkPlayerSources |
| | 447 | + mw.log("EmbedPlayer::addElement :trigger " + playerInterface.id ); |
| | 448 | + $j( mw ).trigger ( 'newEmbedPlayerEvent', playerInterface.id ); |
| | 449 | + |
| | 450 | + // Issue the checkPlayerSources call to the new player interface: |
| | 451 | + // make sure to use the element that is in the DOM: |
| | 452 | + $j( '#' + playerInterface.id ).get(0).checkPlayerSources(); |
| | 453 | + } |
| | 454 | + |
| | 455 | + if( waitForMeta ) { |
| | 456 | + mw.log('EmbedPlayer::WaitForMeta ( video missing height (' + |
| | 457 | + $j( playerElement ).attr('height') + '), width (' + |
| | 458 | + $j( playerElement ).attr('width') + ') or duration: ' + |
| | 459 | + $j( playerElement ).attr('duration') |
| | 460 | + ); |
| | 461 | + |
| | 462 | + playerElement.removeEventListener( "loadedmetadata", runPlayerSwap, true ); |
| | 463 | + playerElement.addEventListener( "loadedmetadata", runPlayerSwap, true ); |
| | 464 | + |
| | 465 | + // Time-out of 5 seconds ( maybe still playable but no timely metadata ) |
| | 466 | + setTimeout( runPlayerSwap, 5000 ); |
| | 467 | + return ; |
| | 468 | + } else { |
| | 469 | + runPlayerSwap(); |
| | 470 | + return ; |
| | 471 | + } |
| 449 | 472 | }); |
| 450 | 473 | }, |
| 451 | 474 | |
| — | — | @@ -457,7 +480,8 @@ |
| 458 | 481 | */ |
| 459 | 482 | waitForMetaCheck: function( playerElement ){ |
| 460 | 483 | var waitForMeta = false; |
| 461 | | - |
| | 484 | + if( !playerElement ) |
| | 485 | + return ; |
| 462 | 486 | // If we don't have a native player don't wait for metadata |
| 463 | 487 | if( !mw.EmbedTypes.players.isSupportedPlayer( 'oggNative') && |
| 464 | 488 | !mw.EmbedTypes.players.isSupportedPlayer( 'h264Native' ) ) |
| — | — | @@ -529,23 +553,25 @@ |
| 530 | 554 | * @param {Object} playerInterface Interface to swap into the target element |
| 531 | 555 | */ |
| 532 | 556 | swapEmbedPlayerElement: function( targetElement, playerInterface ) { |
| 533 | | - mw.log( 'swapEmbedPlayerElement: ' + targetElement.id ); |
| | 557 | + mw.log( 'EmbedPlayer::swapEmbedPlayerElement: ' + targetElement.id ); |
| 534 | 558 | // Create a new element to swap the player interface into |
| 535 | 559 | var swapPlayerElement = document.createElement('div'); |
| 536 | 560 | |
| 537 | | - // get properties / methods from playerInterface |
| | 561 | + // Get properties / methods from playerInterface |
| 538 | 562 | for ( var method in playerInterface ) { |
| 539 | 563 | if ( method != 'readyState' ) { // readyState crashes IE ( don't include ) |
| 540 | 564 | swapPlayerElement[ method ] = playerInterface[ method ]; |
| 541 | 565 | } |
| 542 | 566 | } |
| | 567 | + |
| 543 | 568 | // Check if we are using native controls ( should keep the video embed around ) |
| 544 | | - // "wrap" the player interface |
| 545 | | - if( playerInterface.useNativeControls() ) { |
| | 569 | + if( playerInterface.useNativePlayerControls() ) { |
| 546 | 570 | $j( targetElement ) |
| 547 | | - .attr('id', playerInterface.pid ) |
| | 571 | + .attr( 'id', playerInterface.pid ) |
| | 572 | + .addClass( 'nativeEmbedPlayerPid' ) |
| | 573 | + .show() |
| 548 | 574 | .after( |
| 549 | | - swapPlayerElement |
| | 575 | + $j( swapPlayerElement ).css( 'display', 'none' ) |
| 550 | 576 | ) |
| 551 | 577 | } else { |
| 552 | 578 | $j( targetElement ).replaceWith( swapPlayerElement ); |
| — | — | @@ -560,12 +586,18 @@ |
| 561 | 587 | |
| 562 | 588 | // If we don't already have a loadSpiner add one: |
| 563 | 589 | if( $j('#loadingSpinner_' + playerInterface.id ).length == 0 ){ |
| 564 | | - $j( swapPlayerElement ).append( |
| 565 | | - $j('<div />') |
| 566 | | - .loadingSpinner() |
| 567 | | - ); |
| | 590 | + if( playerInterface.useNativePlayerControls() ) { |
| | 591 | + $j( targetElement ) |
| | 592 | + .getAbsoluteOverlaySpinner() |
| | 593 | + .attr('id', 'loadingSpinner_' + playerInterface.id ) |
| | 594 | + }else{ |
| | 595 | + $j( swapPlayerElement ).append( |
| | 596 | + $j('<div />') |
| | 597 | + .loadingSpinner() |
| | 598 | + ); |
| | 599 | + } |
| 568 | 600 | } |
| 569 | | - return true; |
| | 601 | + return swapPlayerElement; |
| 570 | 602 | }, |
| 571 | 603 | |
| 572 | 604 | |
| — | — | @@ -574,13 +606,13 @@ |
| 575 | 607 | * once players are "ready" |
| 576 | 608 | * |
| 577 | 609 | * This enables mw.ready event to expose video tag |
| 578 | | - * elemetns as if the videotag was supported natively. |
| | 610 | + * elements as if the videotag was supported natively. |
| 579 | 611 | * |
| 580 | 612 | * @param {Object} player The EmbedPlayer object |
| 581 | 613 | */ |
| 582 | 614 | playerReady: function( player ) { |
| 583 | 615 | var _this = this; |
| 584 | | - mw.log( 'ReadyToPlay callback player:' + player.id ); |
| | 616 | + mw.log( 'EmbedPlayer::ReadyToPlay callback player:' + player.id ); |
| 585 | 617 | player.readyToPlay = true; |
| 586 | 618 | |
| 587 | 619 | // Remove the player loader spinner: |
| — | — | @@ -601,10 +633,10 @@ |
| 602 | 634 | // Be sure to remove any player loader spinners |
| 603 | 635 | $j('.playerLoadingSpinner').remove(); |
| 604 | 636 | |
| 605 | | - mw.log( "All on-page players ready run playerMannager callbacks" ); |
| | 637 | + mw.log( "EmbedPlayer::All on-page players ready run playerMannager callbacks" ); |
| 606 | 638 | // Run queued functions |
| 607 | 639 | if( _this.callbackFunctions ) { |
| 608 | | - while ( _this.callbackFunctions.length ) { |
| | 640 | + while ( _this.callbackFunctions.length ) { |
| 609 | 641 | _this.callbackFunctions.shift()(); |
| 610 | 642 | } |
| 611 | 643 | } |
| — | — | @@ -665,7 +697,7 @@ |
| 666 | 698 | * MediaSource constructor: |
| 667 | 699 | */ |
| 668 | 700 | init : function( element ) { |
| 669 | | - // mw.log('adding mediaSource: ' + element); |
| | 701 | + // mw.log('EmbedPlayer::adding mediaSource: ' + element); |
| 670 | 702 | this.src = $j( element ).attr( 'src' ); |
| 671 | 703 | |
| 672 | 704 | // Set default URLTimeEncoding if we have a time url: |
| — | — | @@ -784,11 +816,11 @@ |
| 785 | 817 | }, |
| 786 | 818 | |
| 787 | 819 | /** URI function. |
| 788 | | - * @param {Number} seek_time_sec Int: Used to adjust the URI for url based seeks) |
| | 820 | + * @param {Number} serverSeekTime Int: Used to adjust the URI for url based seeks) |
| 789 | 821 | * @return {String} the URI of the source. |
| 790 | 822 | */ |
| 791 | | - getSrc : function( seek_time_sec ) { |
| 792 | | - if ( !seek_time_sec || !this.URLTimeEncoding ) { |
| | 823 | + getSrc : function( serverSeekTime ) { |
| | 824 | + if ( !serverSeekTime || !this.URLTimeEncoding ) { |
| 793 | 825 | return this.src; |
| 794 | 826 | } |
| 795 | 827 | var endvar = ''; |
| — | — | @@ -797,7 +829,7 @@ |
| 798 | 830 | } |
| 799 | 831 | return mw.replaceUrlParams( this.src, |
| 800 | 832 | { |
| 801 | | - 't': mw.seconds2npt( seek_time_sec ) + endvar |
| | 833 | + 't': mw.seconds2npt( serverSeekTime ) + endvar |
| 802 | 834 | } |
| 803 | 835 | ); |
| 804 | 836 | }, |
| — | — | @@ -825,6 +857,12 @@ |
| 826 | 858 | case 'audio/ogg' : |
| 827 | 859 | return gM( 'mwe-embedplayer-video-audio' ); |
| 828 | 860 | break; |
| | 861 | + case 'video/mpeg' : |
| | 862 | + return 'MPEG video'; // FIXME: i18n |
| | 863 | + break; |
| | 864 | + case 'video/x-msvideo' : |
| | 865 | + return 'AVI video'; // FIXME: i18n |
| | 866 | + break; |
| 829 | 867 | } |
| 830 | 868 | |
| 831 | 869 | // Return tilte based on file name: |
| — | — | @@ -837,13 +875,6 @@ |
| 838 | 876 | return this.mimeType; |
| 839 | 877 | }, |
| 840 | 878 | |
| 841 | | - /** Index accessor function. |
| 842 | | - * @return {Integer} the source's index within the enclosing mediaElement container. |
| 843 | | - */ |
| 844 | | - getIndex : function() { |
| 845 | | - return this.index; |
| 846 | | - }, |
| 847 | | - |
| 848 | 879 | /** |
| 849 | 880 | * |
| 850 | 881 | * Get Duration of the media in milliseconds from the source url. |
| — | — | @@ -893,6 +924,9 @@ |
| 894 | 925 | case '.mp4': |
| 895 | 926 | return 'video/h264'; |
| 896 | 927 | break; |
| | 928 | + case 'webm': |
| | 929 | + return 'video/webm'; |
| | 930 | + break; |
| 897 | 931 | case '.srt': |
| 898 | 932 | return 'text/x-srt'; |
| 899 | 933 | break; |
| — | — | @@ -912,6 +946,15 @@ |
| 913 | 947 | case '.xml': |
| 914 | 948 | return 'text/xml'; |
| 915 | 949 | break; |
| | 950 | + case '.avi': |
| | 951 | + return 'video/x-msvideo'; |
| | 952 | + break; |
| | 953 | + case '.mpg': |
| | 954 | + return 'video/mpeg'; |
| | 955 | + break; |
| | 956 | + case '.mpeg': |
| | 957 | + return 'video/mpeg'; |
| | 958 | + break; |
| 916 | 959 | } |
| 917 | 960 | } |
| 918 | 961 | }; |
| — | — | @@ -955,18 +998,19 @@ |
| 956 | 999 | * @param {Element} videoElement Element that has src attribute or has children source elements |
| 957 | 1000 | */ |
| 958 | 1001 | init: function( videoElement ) { |
| 959 | | - var _this = this; |
| 960 | | - mw.log( videoElement.id + ' Initializing mediaElement...' ); |
| | 1002 | + var _this = this; |
| | 1003 | + mw.log( "EmbedPlayer::mediaElement:init:" + videoElement.id ); |
| 961 | 1004 | this.sources = new Array(); |
| 962 | 1005 | |
| 963 | 1006 | // Process the videoElement as a source element: |
| 964 | 1007 | if ( $j( videoElement ).attr( "src" ) ) { |
| 965 | 1008 | _this.tryAddSource( videoElement ); |
| 966 | 1009 | } |
| 967 | | - |
| | 1010 | + |
| | 1011 | + // Process elements source children |
| 968 | 1012 | $j( videoElement ).find( 'source,track' ).each( function( ) { |
| 969 | 1013 | _this.tryAddSource( this ); |
| 970 | | - } ); |
| | 1014 | + } ); |
| 971 | 1015 | }, |
| 972 | 1016 | |
| 973 | 1017 | /** |
| — | — | @@ -989,7 +1033,7 @@ |
| 990 | 1034 | */ |
| 991 | 1035 | textSourceExists: function() { |
| 992 | 1036 | for ( var i = 0; i < this.sources.length; i++ ) { |
| 993 | | - mw.log( this.sources[i].mimeType ); |
| | 1037 | + mw.log('EmbedPlayer::textSourceExists:'+ this.sources[i].mimeType ); |
| 994 | 1038 | if ( this.sources[i].mimeType == 'text/cmml' || |
| 995 | 1039 | this.sources[i].mimeType == 'text/x-srt' ) |
| 996 | 1040 | { |
| — | — | @@ -1041,7 +1085,7 @@ |
| 1042 | 1086 | * @param {Number} index Index of source element to set as selectedSource |
| 1043 | 1087 | */ |
| 1044 | 1088 | selectSource:function( index ) { |
| 1045 | | - mw.log( 'f:selectSource:' + index ); |
| | 1089 | + mw.log( 'EmbedPlayer::mediaElement:selectSource:' + index ); |
| 1046 | 1090 | var playableSources = this.getPlayableSources(); |
| 1047 | 1091 | for ( var i = 0; i < playableSources.length; i++ ) { |
| 1048 | 1092 | if ( i == index ) { |
| — | — | @@ -1056,8 +1100,8 @@ |
| 1057 | 1101 | /** |
| 1058 | 1102 | * Selects the default source via cookie preference, default marked, or by id order |
| 1059 | 1103 | */ |
| 1060 | | - autoSelectSource: function() { |
| 1061 | | - mw.log( 'f:autoSelectSource:' ); |
| | 1104 | + autoSelectSource: function() { |
| | 1105 | + mw.log( 'EmbedPlayer::mediaElement::autoSelectSource:' + this.id); |
| 1062 | 1106 | // Select the default source |
| 1063 | 1107 | var playableSources = this.getPlayableSources(); |
| 1064 | 1108 | var flash_flag = ogg_flag = false; |
| — | — | @@ -1066,7 +1110,7 @@ |
| 1067 | 1111 | for ( var source = 0; source < playableSources.length; source++ ) { |
| 1068 | 1112 | var mimeType = playableSources[source].mimeType; |
| 1069 | 1113 | if ( mw.EmbedTypes.players.preference[ 'format_preference' ] == mimeType ) { |
| 1070 | | - mw.log( 'set via preference: ' + playableSources[source].mimeType ); |
| | 1114 | + mw.log( 'Set via preference: ' + playableSources[source].mimeType ); |
| 1071 | 1115 | this.selectedSource = playableSources[source]; |
| 1072 | 1116 | return true; |
| 1073 | 1117 | } |
| — | — | @@ -1075,18 +1119,18 @@ |
| 1076 | 1120 | // Set via marked default: |
| 1077 | 1121 | for ( var source = 0; source < playableSources.length; source++ ) { |
| 1078 | 1122 | if ( playableSources[ source ].markedDefault ) { |
| 1079 | | - mw.log( 'set via marked default: ' + playableSources[source].markedDefault ); |
| | 1123 | + mw.log( 'Set via marked default: ' + playableSources[source].markedDefault ); |
| 1080 | 1124 | this.selectedSource = playableSources[source]; |
| 1081 | 1125 | return true; |
| 1082 | 1126 | } |
| 1083 | 1127 | } |
| 1084 | 1128 | |
| 1085 | | - // Set native client for flash |
| | 1129 | + // Prefer native playback |
| 1086 | 1130 | for ( var source = 0; source < playableSources.length; source++ ) { |
| 1087 | 1131 | var mimeType = playableSources[source].mimeType; |
| 1088 | 1132 | var player = mw.EmbedTypes.players.defaultPlayer( mimeType ); |
| 1089 | | - mw.log( 'f:autoSelectSource:' + mimeType ); |
| 1090 | | - if ( this.isOgg( mimeType ) && player && player.library == 'Native' ) { |
| | 1133 | + if ( player && player.library == 'Native' ) { |
| | 1134 | + mw.log('Set native playback'); |
| 1091 | 1135 | this.selectedSource = playableSources[ source ]; |
| 1092 | 1136 | return true; |
| 1093 | 1137 | } |
| — | — | @@ -1103,7 +1147,8 @@ |
| 1104 | 1148 | || |
| 1105 | 1149 | player.library == 'Kplayer' |
| 1106 | 1150 | ) |
| 1107 | | - ) { |
| | 1151 | + ) { |
| | 1152 | + mw.log('Set h264 via native or flash fallback'); |
| 1108 | 1153 | this.selectedSource = playableSources[ source ]; |
| 1109 | 1154 | return true; |
| 1110 | 1155 | } |
| — | — | @@ -1197,7 +1242,7 @@ |
| 1198 | 1243 | /** |
| 1199 | 1244 | * Get playable sources |
| 1200 | 1245 | * |
| 1201 | | - * @returns {Array} of playbale sources |
| | 1246 | + * @returns {Array} of playable sources |
| 1202 | 1247 | */ |
| 1203 | 1248 | getPlayableSources: function() { |
| 1204 | 1249 | var playableSources = []; |
| — | — | @@ -1216,7 +1261,7 @@ |
| 1217 | 1262 | * @param roe_data ROE data. |
| 1218 | 1263 | */ |
| 1219 | 1264 | addROE: function( roe_data ) { |
| 1220 | | - mw.log( 'f:addROE' ); |
| | 1265 | + mw.log( 'EmbedPlayer::mediaElement:addROE' ); |
| 1221 | 1266 | this.addedROEData = true; |
| 1222 | 1267 | var _this = this; |
| 1223 | 1268 | if ( roe_data ) { |
| — | — | @@ -1291,7 +1336,7 @@ |
| 1292 | 1337 | 'cmmlData': null, |
| 1293 | 1338 | |
| 1294 | 1339 | // Stores the seek time request, Updated by the doSeek function |
| 1295 | | - 'seek_time_sec' : 0, |
| | 1340 | + 'serverSeekTime' : 0, |
| 1296 | 1341 | |
| 1297 | 1342 | // If the embedPlayer is current 'seeking' |
| 1298 | 1343 | 'seeking' : false, |
| — | — | @@ -1316,34 +1361,38 @@ |
| 1317 | 1362 | * @param {Object} customAttributes Attributes supplied via argument (rather than applied to the element) |
| 1318 | 1363 | */ |
| 1319 | 1364 | init: function( element, customAttributes ) { |
| 1320 | | - var _this = this; |
| | 1365 | + var _this = this; |
| 1321 | 1366 | // Set customAttributes if unset: |
| 1322 | 1367 | if ( !customAttributes ) { |
| 1323 | 1368 | customAttributes = { }; |
| 1324 | 1369 | } |
| 1325 | 1370 | |
| 1326 | | - var playerAttributes = mw.getConfig( 'embedPlayerAttributes' ); |
| 1327 | | - |
| 1328 | | - // Setup the player Interface from supported attributes: |
| | 1371 | + var playerAttributes = mw.getConfig( 'EmbedPlayer.Attributes' ); |
| | 1372 | + // Setup the player Interface from supported attributes: |
| 1329 | 1373 | for ( var attr in playerAttributes ) { |
| 1330 | 1374 | if ( customAttributes[ attr ] || customAttributes[ attr ] === false ) { |
| 1331 | 1375 | this[ attr ] = customAttributes[ attr ]; |
| 1332 | | - } else if ( element.getAttribute( attr ) ) { |
| 1333 | | - this[ attr ] = element.getAttribute( attr ); |
| | 1376 | + } else if ( element.getAttribute( attr ) != null ) { |
| | 1377 | + // boolean attributes |
| | 1378 | + if( element.getAttribute( attr ) == '' ){ |
| | 1379 | + this[ attr ] = true; |
| | 1380 | + } else { |
| | 1381 | + this[ attr ] = element.getAttribute( attr ); |
| | 1382 | + } |
| 1334 | 1383 | } else { |
| 1335 | 1384 | this[attr] = playerAttributes[attr]; |
| 1336 | 1385 | } |
| 1337 | 1386 | // string -> boolean |
| 1338 | 1387 | if( this[ attr ] == "false" ) this[attr] = false; |
| 1339 | 1388 | if( this[ attr ] == "true" ) this[attr] = true; |
| 1340 | | - } |
| | 1389 | + } |
| 1341 | 1390 | |
| 1342 | 1391 | if( this.apiTitleKey ){ |
| 1343 | 1392 | this.apiTitleKey = unescape( this.apiTitleKey ); |
| 1344 | 1393 | } |
| 1345 | 1394 | |
| 1346 | 1395 | // Hide "controls" if using native player controls: |
| 1347 | | - if( this.useNativeControls() ){ |
| | 1396 | + if( this.useNativePlayerControls() ){ |
| 1348 | 1397 | _this.controls = false; |
| 1349 | 1398 | } |
| 1350 | 1399 | |
| — | — | @@ -1368,10 +1417,13 @@ |
| 1369 | 1418 | |
| 1370 | 1419 | // Set the default skin if unset: |
| 1371 | 1420 | if ( !this.skinName ) { |
| 1372 | | - this.skinName = mw.getConfig( 'playerSkinName' ); |
| | 1421 | + this.skinName = mw.getConfig( 'EmbedPlayer.SkinName' ); |
| 1373 | 1422 | } |
| 1374 | | - |
| 1375 | 1423 | |
| | 1424 | + if( !this.monitorRate ){ |
| | 1425 | + this.monitorRate = mw.getConfig( 'EmbedPlayer.MonitorRate' ); |
| | 1426 | + } |
| | 1427 | + |
| 1376 | 1428 | // Make sure startOffset is cast as an float: |
| 1377 | 1429 | if ( this.startOffset && this.startOffset.split( ':' ).length >= 2 ) { |
| 1378 | 1430 | this.startOffset = parseFloat( mw.npt2seconds( this.startOffset ) ); |
| — | — | @@ -1393,11 +1445,11 @@ |
| 1394 | 1446 | |
| 1395 | 1447 | // Make sure duration is a float: |
| 1396 | 1448 | this.duration = parseFloat( this.duration ); |
| 1397 | | - mw.log( this.id + " duration is: " + this.duration ); |
| | 1449 | + mw.log( 'EmbedPlayer::mediaElement:' + this.id + " duration is: " + this.duration ); |
| 1398 | 1450 | |
| 1399 | 1451 | // Set the player size attributes based loaded video element: |
| 1400 | 1452 | this.setPlayerSize( element ); |
| 1401 | | - |
| | 1453 | + |
| 1402 | 1454 | // Set the plugin id |
| 1403 | 1455 | this.pid = 'pid_' + this.id; |
| 1404 | 1456 | |
| — | — | @@ -1410,7 +1462,25 @@ |
| 1411 | 1463 | |
| 1412 | 1464 | // Add the mediaElement object with the elements sources: |
| 1413 | 1465 | this.mediaElement = new mediaElement( element ); |
| 1414 | | - |
| | 1466 | + |
| | 1467 | + // Process attribute "sources" for dynamic embedding |
| | 1468 | + if( customAttributes.sources && customAttributes.sources.length ){ |
| | 1469 | + for( var i =0; i < customAttributes.sources.length ; i ++ ){ |
| | 1470 | + var customSource = customAttributes.sources[i]; |
| | 1471 | + if( customSource.src ){ |
| | 1472 | + var $source = $j('<source />') |
| | 1473 | + .attr( 'src', customSource.src ); |
| | 1474 | + // xxx todo pull list of valid source attributes from mediaSource prototype |
| | 1475 | + if( customSource.type ){ |
| | 1476 | + $source.attr('type', customSource.type ) |
| | 1477 | + } |
| | 1478 | + if( customSource.title ){ |
| | 1479 | + $source.attr('title', customSource.title ); |
| | 1480 | + } |
| | 1481 | + this.mediaElement.tryAddSource( $source.get(0) ); |
| | 1482 | + } |
| | 1483 | + } |
| | 1484 | + } |
| 1415 | 1485 | }, |
| 1416 | 1486 | |
| 1417 | 1487 | /** |
| — | — | @@ -1430,55 +1500,75 @@ |
| 1431 | 1501 | */ |
| 1432 | 1502 | setPlayerSize: function( element ) { |
| 1433 | 1503 | |
| 1434 | | - this['height'] = parseInt( $j(element).css( 'height' ) ); |
| 1435 | | - this['width'] = parseInt( $j(element).css( 'width' ) ); |
| | 1504 | + this.height = parseInt( $j(element).css( 'height' ) ); |
| | 1505 | + this.width = parseInt( $j(element).css( 'width' ) ); |
| 1436 | 1506 | |
| 1437 | | - if( !this['height'] && !this['width'] ) { |
| 1438 | | - this['height'] = parseInt( $j(element).attr( 'height' ) ); |
| 1439 | | - this['width'] = parseInt( $j(element).attr( 'width' ) ); |
| | 1507 | + if( !this.height && !this.width ) { |
| | 1508 | + this.height = parseInt( $j(element).attr( 'height' ) ); |
| | 1509 | + this.width = parseInt( $j(element).attr( 'width' ) ); |
| 1440 | 1510 | } |
| 1441 | 1511 | |
| 1442 | 1512 | // Special case for audio |
| 1443 | 1513 | // Firefox sets audio height to "0px" while webkit uses 32px .. force zero: |
| 1444 | | - if( element.tagName.toLowerCase() == 'audio' && this['height'] == '32') { |
| 1445 | | - this['height'] = 0; |
| | 1514 | + if( element.tagName.toLowerCase() == 'audio' && this.height == '32' ) { |
| | 1515 | + this.height = 0; |
| 1446 | 1516 | } |
| 1447 | 1517 | |
| 1448 | 1518 | // Use default aspect ration to get height or width ( if rewriting a non-audio player ) |
| 1449 | | - if( element.tagName.toLowerCase() != 'audio' ) { |
| 1450 | | - if( this['height'] && !this['width'] && this.videoAspect ) { |
| 1451 | | - var aspect = this.videoAspect.split( ':' ); |
| 1452 | | - this['width'] = parseInt( this.height * ( aspect[0] / aspect[1] ) ); |
| | 1519 | + if( element.tagName.toLowerCase() != 'audio' && this.videoAspect ) { |
| | 1520 | + var aspect = this.videoAspect.split( ':' ); |
| | 1521 | + if( this.height && !this.width ) { |
| | 1522 | + this.width = parseInt( this.height * ( aspect[0] / aspect[1] ) ); |
| | 1523 | + } |
| | 1524 | + if( this.width && !this.height ) { |
| | 1525 | + var apectRatio = ( aspect[1] / aspect[0] ); |
| | 1526 | + this.height = parseInt( this.width * ( aspect[1] / aspect[0] ) ); |
| 1453 | 1527 | } |
| 1454 | | - |
| 1455 | | - if( this['width'] && !this['height'] && this.videoAspect ) { |
| 1456 | | - var aspect = this.videoAspect.split( ':' ); |
| 1457 | | - this['height'] = parseInt( this.width * ( aspect[1] / aspect[0] ) ); |
| 1458 | | - } |
| 1459 | 1528 | } |
| 1460 | 1529 | |
| 1461 | 1530 | // On load sometimes attr is temporally -1 as we don't have video metadata yet. |
| 1462 | 1531 | // or in IE we get NaN for width height |
| 1463 | 1532 | // |
| 1464 | 1533 | // NOTE: browsers that do support height width should set "waitForMeta" flag in addElement |
| 1465 | | - if( ( isNaN( this['height'] ) && isNaN( this['width'] ) ) || |
| 1466 | | - ( this['height'] == -1 || this['width'] == -1 ) || |
| | 1534 | + if( ( isNaN( this.height ) && isNaN( this.width ) ) || |
| | 1535 | + ( this.height == -1 || this.width == -1 ) || |
| 1467 | 1536 | // Check for firefox defaults |
| 1468 | 1537 | // Note: ideally firefox would not do random guesses at css values |
| 1469 | 1538 | ( (this.height == 150 || this.height == 64 ) && this.width == 300 ) |
| 1470 | 1539 | ) { |
| 1471 | | - var defaultSize = mw.getConfig( 'videoSize' ).split( 'x' ); |
| 1472 | | - this['width'] = defaultSize[0]; |
| | 1540 | + var defaultSize = mw.getConfig( 'EmbedPlayer.DefaultSize' ).split( 'x' ); |
| | 1541 | + this.width = defaultSize[0]; |
| 1473 | 1542 | |
| 1474 | 1543 | // Special height default for audio tag ( if not set ) |
| 1475 | 1544 | if( element.tagName.toLowerCase() == 'audio' ) { |
| 1476 | | - this['height'] = 0; |
| | 1545 | + this.height = 0; |
| 1477 | 1546 | }else{ |
| 1478 | | - this['height'] = defaultSize[1]; |
| | 1547 | + this.height = defaultSize[1]; |
| 1479 | 1548 | } |
| 1480 | 1549 | } |
| 1481 | 1550 | |
| 1482 | 1551 | }, |
| | 1552 | + /** |
| | 1553 | + * Resize the player to a new size |
| | 1554 | + */ |
| | 1555 | + resizePlayer: function( size , animate){ |
| | 1556 | + mw.log("EmbedPlayer::resizePlayer:" + size.width + ' x ' + size.height ); |
| | 1557 | + this.width = size.width; |
| | 1558 | + this.height = size.height; |
| | 1559 | + var playerSize = {'width' : this.width, 'height' : this.height }; |
| | 1560 | + // check if height needs to include interface contorls |
| | 1561 | + if( ! this.controlBuilder.checkOverlayControls() ){ |
| | 1562 | + size.height = size.height + this.controlBuilder.height; |
| | 1563 | + } |
| | 1564 | + |
| | 1565 | + if( animate ){ |
| | 1566 | + $j(this).animate(playerSize); |
| | 1567 | + this.$interface.animate( size ); |
| | 1568 | + }else{ |
| | 1569 | + $j(this).css(playerSize); |
| | 1570 | + this.$interface.css( size ); |
| | 1571 | + } |
| | 1572 | + }, |
| 1483 | 1573 | |
| 1484 | 1574 | /** |
| 1485 | 1575 | * Get the player pixel width not including controls |
| — | — | @@ -1504,21 +1594,22 @@ |
| 1505 | 1595 | * that request is issued here |
| 1506 | 1596 | */ |
| 1507 | 1597 | checkPlayerSources: function() { |
| 1508 | | - mw.log( 'f:checkPlayerSources: ' + this.id ); |
| | 1598 | + mw.log( 'EmbedPlayer::checkPlayerSources: ' + this.id ); |
| 1509 | 1599 | var _this = this; |
| 1510 | 1600 | |
| 1511 | 1601 | // Scope the end of check for player sources so it can be called in a callback |
| 1512 | 1602 | var finishCheckPlayerSources = function(){ |
| 1513 | 1603 | // Run embedPlayer sources hook |
| 1514 | | - mw.runTriggersCallback( _this, 'checkPlayerSourcesEvent', function(){ |
| | 1604 | + mw.runTriggersCallback( _this, 'checkPlayerSourcesEvent', function(){ |
| 1515 | 1605 | _this.checkForTimedText(); |
| 1516 | | - }) |
| 1517 | | - } |
| | 1606 | + }); |
| | 1607 | + }; |
| 1518 | 1608 | |
| 1519 | | - // NOTE: Should could be moved to mediaWiki Api support module |
| 1520 | | - if ( _this.apiTitleKey ) { |
| | 1609 | + // NOTE: Should could be moved to mediaWiki Api support module |
| | 1610 | + // only load from api if sources are empty: |
| | 1611 | + if ( _this.apiTitleKey && this.mediaElement.sources.length == 0) { |
| 1521 | 1612 | // Load media from external data |
| 1522 | | - mw.log( 'checkPlayerSources: loading apiTitleKey data' ); |
| | 1613 | + mw.log( 'EmbedPlayer::checkPlayerSources: loading apiTitleKey:' + _this.apiTitleKey ); |
| 1523 | 1614 | _this.loadSourceFromApi( function(){ |
| 1524 | 1615 | finishCheckPlayerSources(); |
| 1525 | 1616 | } ); |
| — | — | @@ -1527,9 +1618,19 @@ |
| 1528 | 1619 | finishCheckPlayerSources(); |
| 1529 | 1620 | } |
| 1530 | 1621 | }, |
| | 1622 | + /** |
| | 1623 | + * Insert and play a video source ( useful for ads or bumper videos ) |
| | 1624 | + * |
| | 1625 | + * Only works while video is in active play back. |
| | 1626 | + * Only tested with native playback atm. |
| | 1627 | + */ |
| | 1628 | + insertAndPlaySource: function( source ){ |
| | 1629 | + mw.log("Error: only native playback supports insertAndPlaySource right now"); |
| | 1630 | + }, |
| 1531 | 1631 | |
| 1532 | 1632 | /** |
| 1533 | 1633 | * Load Source video info from mediaWiki Api title key ( this.apiTitleKey ) |
| | 1634 | + * @@todo move this to mediaWiki 'api' module |
| 1534 | 1635 | * @param {Function} callback Function called once loading is complete |
| 1535 | 1636 | */ |
| 1536 | 1637 | loadSourceFromApi: function( callback ){ |
| — | — | @@ -1541,7 +1642,7 @@ |
| 1542 | 1643 | |
| 1543 | 1644 | // Set local apiProvider via config if not defined |
| 1544 | 1645 | if( !_this.apiProvider ) { |
| 1545 | | - _this.apiProvider = mw.getConfig( 'apiProvider' ); |
| | 1646 | + _this.apiProvider = mw.getConfig( 'EmbedPlayer.ApiProvider' ); |
| 1546 | 1647 | } |
| 1547 | 1648 | |
| 1548 | 1649 | // Setup the request |
| — | — | @@ -1552,10 +1653,10 @@ |
| 1553 | 1654 | 'iiprop': 'url|size|dimensions|metadata', |
| 1554 | 1655 | 'iiurlwidth': _this.width, |
| 1555 | 1656 | 'redirects' : true // automatically resolve redirects |
| 1556 | | - } |
| 1557 | | - |
| | 1657 | + }; |
| | 1658 | + |
| 1558 | 1659 | // Run the request: |
| 1559 | | - mw.getJSON( mw.getApiProviderURL( this.apiProvider ), request, function( data ){ |
| | 1660 | + mw.getJSON( mw.getApiProviderURL( _this.apiProvider ), request, function( data ){ |
| 1560 | 1661 | if ( data.query.pages ) { |
| 1561 | 1662 | for ( var i in data.query.pages ) { |
| 1562 | 1663 | if( i == '-1' ) { |
| — | — | @@ -1625,7 +1726,7 @@ |
| 1626 | 1727 | */ |
| 1627 | 1728 | checkForTimedText: function( ) { |
| 1628 | 1729 | var _this = this; |
| 1629 | | - mw.log( 'checkForTimedText: ' + _this.id + " height: " + this.height ); |
| | 1730 | + mw.log( 'EmbedPlayer::checkForTimedText: ' + _this.id + " height: " + this.height ); |
| 1630 | 1731 | // Check for timedText support |
| 1631 | 1732 | if( this.isTimedTextSupported() ) { |
| 1632 | 1733 | mw.load( 'TimedText', function() { |
| — | — | @@ -1645,7 +1746,7 @@ |
| 1646 | 1747 | * Sets load error if no source is playable |
| 1647 | 1748 | */ |
| 1648 | 1749 | setupSourcePlayer: function() { |
| 1649 | | - mw.log("setupSourcePlayer: " + this.id ); |
| | 1750 | + mw.log("EmbedPlayer::setupSourcePlayer: " + this.id ); |
| 1650 | 1751 | // Autoseletct the media source |
| 1651 | 1752 | this.mediaElement.autoSelectSource(); |
| 1652 | 1753 | |
| — | — | @@ -1684,6 +1785,9 @@ |
| 1685 | 1786 | |
| 1686 | 1787 | mw.log( 'No player found for given source type ' + missingType ); |
| 1687 | 1788 | this.showPluginMissingHTML( missingType ); |
| | 1789 | + |
| | 1790 | + // Call the global player manager to inform this video interface is "ready" for page callback to be proccessed. |
| | 1791 | + mw.playerManager.playerReady( this ); |
| 1688 | 1792 | } |
| 1689 | 1793 | }, |
| 1690 | 1794 | |
| — | — | @@ -1693,7 +1797,7 @@ |
| 1694 | 1798 | * @param {Function} callback Function to be called once playback-system has been inherited |
| 1695 | 1799 | */ |
| 1696 | 1800 | inheritEmbedPlayer: function( callback ) { |
| 1697 | | - mw.log( "inheritEmbedPlayer:duration is: " + this.getDuration() + ' p: ' + this.id ); |
| | 1801 | + mw.log( "EmbedPlayer::inheritEmbedPlayer:duration is: " + this.getDuration() + ' p: ' + this.id ); |
| 1698 | 1802 | |
| 1699 | 1803 | // Clear out any non-base embedObj methods: |
| 1700 | 1804 | if ( this.instanceOf ) { |
| — | — | @@ -1708,12 +1812,12 @@ |
| 1709 | 1813 | } |
| 1710 | 1814 | |
| 1711 | 1815 | // Set up the new embedObj |
| 1712 | | - mw.log( 'f: inheritEmbedPlayer: embedding with ' + this.selectedPlayer.library ); |
| | 1816 | + mw.log( 'EmbedPlayer::inheritEmbedPlayer: embedding with ' + this.selectedPlayer.library ); |
| 1713 | 1817 | var _this = this; |
| 1714 | 1818 | |
| 1715 | 1819 | // Load the selected player |
| 1716 | 1820 | this.selectedPlayer.load( function() { |
| 1717 | | - mw.log( 'EmbedPlayer:: ' + _this.selectedPlayer.library + " player loaded for " + _this.id ); |
| | 1821 | + mw.log( 'EmbedPlayer::inheritEmbedPlayer ' + _this.selectedPlayer.library + " player loaded for " + _this.id ); |
| 1718 | 1822 | |
| 1719 | 1823 | // Get embed library player Interface |
| 1720 | 1824 | var playerInterface = mw[ 'EmbedPlayer' + _this.selectedPlayer.library ]; |
| — | — | @@ -1750,8 +1854,10 @@ |
| 1751 | 1855 | selectPlayer: function( player ) { |
| 1752 | 1856 | var _this = this; |
| 1753 | 1857 | if ( this.selectedPlayer.id != player.id ) { |
| 1754 | | - this.selectedPlayer = player; |
| | 1858 | + this.selectedPlayer = player; |
| 1755 | 1859 | this.inheritEmbedPlayer( function(){ |
| | 1860 | + // Hide / remove track container |
| | 1861 | + _this.$interface.find( '.track' ).remove(); |
| 1756 | 1862 | // We have to re-bind hoverIntent ( has to happen in this scope ) |
| 1757 | 1863 | if( _this.controls && _this.controlBuilder.checkOverlayControls() ){ |
| 1758 | 1864 | _this.controlBuilder.showControlBar(); |
| — | — | @@ -1775,7 +1881,7 @@ |
| 1776 | 1882 | * |
| 1777 | 1883 | * @return start_npt and end_npt time if present |
| 1778 | 1884 | */ |
| 1779 | | - getTimeRange: function() { |
| | 1885 | + getTimeRange: function() { |
| 1780 | 1886 | var end_time = (this.controlBuilder.longTimeDisp)? '/' + mw.seconds2npt( this.getDuration() ) : ''; |
| 1781 | 1887 | var default_time_range = '0:00:00' + end_time; |
| 1782 | 1888 | if ( !this.mediaElement ) |
| — | — | @@ -1823,7 +1929,8 @@ |
| 1824 | 1930 | }, |
| 1825 | 1931 | |
| 1826 | 1932 | /** |
| 1827 | | - * Seek function (should be implemented by embed player interface ) |
| | 1933 | + * Seek function ( should be implemented by embedPlayer interface playerNative, playerKplayer etc. ) |
| | 1934 | + * embedPlayer doSeek only handles URL time seeks |
| 1828 | 1935 | */ |
| 1829 | 1936 | doSeek: function( percent ) { |
| 1830 | 1937 | var _this = this; |
| — | — | @@ -1832,19 +1939,22 @@ |
| 1833 | 1940 | // Run the seeking hook |
| 1834 | 1941 | $j( this.embedPlayer ).trigger( 'onSeek' ); |
| 1835 | 1942 | |
| 1836 | | - // See if we should do a server side seek ( player idepenent ) |
| 1837 | | - if ( this.supportsURLTimeEncoding() ) { |
| 1838 | | - // Make sure this.seek_time_sec is up-to-date: |
| 1839 | | - this.seek_time_sec = mw.npt2seconds( this.start_npt ) + parseFloat( percent * this.getDuration() ); |
| 1840 | | - mw.log( 'updated seek_time_sec: ' + mw.seconds2npt ( this.seek_time_sec ) ); |
| | 1943 | + // See if we should do a server side seek ( player independent ) |
| | 1944 | + if ( this.supportsURLTimeEncoding() ) { |
| | 1945 | + mw.log( 'EmbedPlayer::doSeek:: updated serverSeekTime: ' + mw.seconds2npt ( this.serverSeekTime ) ); |
| 1841 | 1946 | this.stop(); |
| 1842 | 1947 | this.didSeekJump = true; |
| | 1948 | + // Make sure this.serverSeekTime is up-to-date: |
| | 1949 | + this.serverSeekTime = mw.npt2seconds( this.start_npt ) + parseFloat( percent * this.getDuration() ); |
| 1843 | 1950 | // Update the slider |
| 1844 | | - this.updatePlayHead( percent ); |
| 1845 | | - } |
| | 1951 | + this.updatePlayHead( percent ); |
| | 1952 | + } |
| | 1953 | + |
| 1846 | 1954 | // Do play request in 100ms ( give the dom time to swap out the embed player ) |
| 1847 | | - setTimeout( function() { |
| | 1955 | + setTimeout( function() { |
| | 1956 | + _this.seeking = false; |
| 1848 | 1957 | _this.play() |
| | 1958 | + _this.monitor(); |
| 1849 | 1959 | }, 100 ); |
| 1850 | 1960 | |
| 1851 | 1961 | // Run the onSeeking interface update |
| — | — | @@ -1859,91 +1969,47 @@ |
| 1860 | 1970 | */ |
| 1861 | 1971 | setCurrentTime: function( time, callback ) { |
| 1862 | 1972 | mw.log( 'Error: base embed setCurrentTime can not frame serve (override via plugin)' ); |
| 1863 | | - }, |
| | 1973 | + }, |
| 1864 | 1974 | |
| 1865 | 1975 | /** |
| 1866 | | - * Setup the embed player |
| 1867 | | - * issues a loading request |
| 1868 | | - */ |
| 1869 | | - doEmbedPlayer: function() { |
| 1870 | | - mw.log( 'EmbedPlayer :: doEmbedPlayer::' + this.selectedPlayer.id ); |
| 1871 | | - //mw.log( 'thum disp:' + this.thumbnail_disp ); |
| 1872 | | - var _this = this; |
| 1873 | | - |
| 1874 | | - var doEmbedPlayerLocal = function(){ |
| 1875 | | - // Set "loading" here ( if displaying controls ) |
| 1876 | | - if( ! _this.useNativeControls() ){ |
| 1877 | | - $j( _this ).html( |
| 1878 | | - $j( '<div />' ) |
| 1879 | | - .css({ |
| 1880 | | - 'color' : 'black', |
| 1881 | | - 'width' : _this.width + 'px', |
| 1882 | | - 'height' : _this.height + 'px' |
| 1883 | | - }) |
| 1884 | | - ); |
| 1885 | | - } |
| 1886 | | - |
| 1887 | | - // Reset some play state flags: |
| 1888 | | - _this.bufferStartFlag = false; |
| 1889 | | - _this.bufferEndFlag = false; |
| 1890 | | - |
| 1891 | | - // Make sure the player is |
| 1892 | | - mw.log( 'performing embed for ' + _this.id ); |
| 1893 | | - }; |
| 1894 | | - |
| 1895 | | - // If no binded events, run the local doEmbedPlayer function directly: |
| 1896 | | - if( $j( this ).data('events').length == 0 ){ |
| 1897 | | - doEmbedPlayerLocal(); |
| 1898 | | - } else { |
| 1899 | | - // Trigger the doEmbedPlayer event / hook with callback |
| 1900 | | - $j( this ).trigger( 'doEmbedPlayerEvent', function(){ |
| 1901 | | - //done |
| 1902 | | - doEmbedPlayerLocal(); |
| 1903 | | - }); |
| 1904 | | - } |
| 1905 | | - |
| 1906 | | - // mw.log('should embed:' + embed_code); |
| 1907 | | - _this.doEmbedHTML() |
| 1908 | | - }, |
| 1909 | | - |
| 1910 | | - |
| 1911 | | - |
| 1912 | | - /** |
| 1913 | 1976 | * On clip done action. Called once a clip is done playing |
| 1914 | 1977 | */ |
| 1915 | 1978 | onClipDone: function() { |
| 1916 | | - mw.log( 'base:onClipDone ::' + this.id + ' doneCount:' + this.donePlayingCount ); |
| | 1979 | + mw.log( 'EmbedPlayer::onClipDone:' + this.id + ' doneCount:' + this.donePlayingCount + ' stop state:' +this.isStopped() ); |
| 1917 | 1980 | var _this = this; |
| 1918 | | - |
| 1919 | | - |
| 1920 | | - // Only run stoped once: |
| 1921 | | - if( !this.isStoped() ){ |
| | 1981 | + |
| | 1982 | + // Only run stopped once: |
| | 1983 | + if( !this.isStopped() ){ |
| 1922 | 1984 | // Stop the monitor: |
| 1923 | 1985 | this.stopMonitor(); |
| 1924 | 1986 | |
| | 1987 | + // Show the control bar: |
| | 1988 | + this.controlBuilder.showControlBar(); |
| | 1989 | + |
| 1925 | 1990 | // Update the clip done playing count: |
| 1926 | 1991 | this.donePlayingCount ++; |
| 1927 | 1992 | |
| 1928 | 1993 | // Fire the html5 ended binding |
| 1929 | | - mw.log( "ended" ); |
| 1930 | 1994 | var onDoneActionObject = { |
| 1931 | 1995 | 'runBaseControlDone' : true |
| 1932 | 1996 | } |
| 1933 | 1997 | |
| 1934 | | - // run the ended trigger ( allow the ended object to prevent default actions ) |
| | 1998 | + // Run the ended trigger ( allow the ended object to prevent default actions ) |
| | 1999 | + mw.log("EmbedPlayer::onClipDone:Trigger ended"); |
| 1935 | 2000 | $j( this ).trigger( 'ended', onDoneActionObject ); |
| 1936 | 2001 | |
| 1937 | 2002 | if( onDoneActionObject.runBaseControlDone ){ |
| 1938 | 2003 | |
| 1939 | 2004 | // Check if we have the "loop" property set |
| 1940 | 2005 | if( this.loop ) { |
| | 2006 | + this.stop(); |
| 1941 | 2007 | this.play(); |
| 1942 | 2008 | return; |
| 1943 | 2009 | } |
| 1944 | 2010 | |
| 1945 | 2011 | // Stop the clip (load the thumbnail etc) |
| 1946 | 2012 | this.stop(); |
| 1947 | | - this.seek_time_sec = 0; |
| | 2013 | + this.serverSeekTime = 0; |
| 1948 | 2014 | this.updatePlayHead( 0 ); |
| 1949 | 2015 | |
| 1950 | 2016 | // Make sure we are not in preview mode( no end clip actions in preview mode) |
| — | — | @@ -1964,7 +2030,7 @@ |
| 1965 | 2031 | */ |
| 1966 | 2032 | showThumbnail: function() { |
| 1967 | 2033 | var _this = this; |
| 1968 | | - mw.log( 'f:showThumbnail' + this.thumbnail_disp ); |
| | 2034 | + mw.log( 'EmbedPlayer::showThumbnail' + this.thumbnail_disp ); |
| 1969 | 2035 | |
| 1970 | 2036 | // Close Menu Overlay: |
| 1971 | 2037 | this.controlBuilder.closeMenuOverlay(); |
| — | — | @@ -1978,7 +2044,7 @@ |
| 1979 | 2045 | this.controlBuilder.addControlBindings(); |
| 1980 | 2046 | |
| 1981 | 2047 | // Once the thumbnail is shown run the mediaReady trigger (if not using native controls) |
| 1982 | | - if( !this.useNativeControls() ){ |
| | 2048 | + if( !this.useNativePlayerControls() ){ |
| 1983 | 2049 | mw.log("mediaLoaded"); |
| 1984 | 2050 | $j( this ).trigger( 'mediaLoaded' ); |
| 1985 | 2051 | } |
| — | — | @@ -1993,13 +2059,13 @@ |
| 1994 | 2060 | // Set-up the local controlBuilder instance: |
| 1995 | 2061 | this.controlBuilder = new mw.PlayerControlBuilder( this ); |
| 1996 | 2062 | var _this = this; |
| 1997 | | - // Make sure we have interface_wrap |
| 1998 | | - if( $j( this ).parent( '.interface_wrap' ).length == 0 ) { |
| | 2063 | + // Make sure we have mwplayer_interface |
| | 2064 | + if( $j( this ).parent( '.mwplayer_interface' ).length == 0 ) { |
| 1999 | 2065 | // Select "player" |
| 2000 | 2066 | $j( this ) |
| 2001 | 2067 | .wrap( |
| 2002 | 2068 | $j('<div>') |
| 2003 | | - .addClass( 'interface_wrap ' + this.controlBuilder.playerClass ) |
| | 2069 | + .addClass( 'mwplayer_interface ' + this.controlBuilder.playerClass ) |
| 2004 | 2070 | .css({ |
| 2005 | 2071 | 'width' : parseInt( this.width ) + 'px', |
| 2006 | 2072 | 'height' : parseInt( this.height ) + 'px', |
| — | — | @@ -2008,8 +2074,8 @@ |
| 2009 | 2075 | ) |
| 2010 | 2076 | } |
| 2011 | 2077 | |
| 2012 | | - //Set up local jQuery object reference to "interface_wrap" |
| 2013 | | - this.$interface = $j( this ).parent( '.interface_wrap' ); |
| | 2078 | + //Set up local jQuery object reference to "mwplayer_interface" |
| | 2079 | + this.$interface = $j( this ).parent( '.mwplayer_interface' ); |
| 2014 | 2080 | |
| 2015 | 2081 | // Update Thumbnail for the "player" |
| 2016 | 2082 | this.updatePosterHTML(); |
| — | — | @@ -2024,7 +2090,7 @@ |
| 2025 | 2091 | } |
| 2026 | 2092 | |
| 2027 | 2093 | if ( this.autoplay ) { |
| 2028 | | - mw.log( 'showPlayer::activating autoplay' ); |
| | 2094 | + mw.log( 'EmbedPlayer::showPlayer::activating autoplay' ); |
| 2029 | 2095 | // Issue a non-blocking play request |
| 2030 | 2096 | setTimeout(function(){ |
| 2031 | 2097 | _this.play(); |
| — | — | @@ -2047,7 +2113,9 @@ |
| 2048 | 2114 | $j( '#' + this.pid ).hide() |
| 2049 | 2115 | } |
| 2050 | 2116 | if( this.mediaElement.sources.length == 0 ){ |
| 2051 | | - $j( this ).html( |
| | 2117 | + // hide the pid if present: |
| | 2118 | + $j( '#pid_' + this.id ).hide(); |
| | 2119 | + $j( this ).show().html( |
| 2052 | 2120 | $j('<span />').text( |
| 2053 | 2121 | gM('mwe-embedplayer-missing-source') |
| 2054 | 2122 | ) |
| — | — | @@ -2083,7 +2151,7 @@ |
| 2084 | 2152 | * @param {String} time_req |
| 2085 | 2153 | */ |
| 2086 | 2154 | updateVideoTimeReq: function( time_req ) { |
| 2087 | | - mw.log( 'f:updateVideoTimeReq' ); |
| | 2155 | + mw.log( 'EmbedPlayer::updateVideoTimeReq:' + time_req ); |
| 2088 | 2156 | var time_parts = time_req.split( '/' ); |
| 2089 | 2157 | this.updateVideoTime( time_parts[0], time_parts[1] ); |
| 2090 | 2158 | }, |
| — | — | @@ -2106,9 +2174,9 @@ |
| 2107 | 2175 | |
| 2108 | 2176 | // reset seek_offset: |
| 2109 | 2177 | if ( this.mediaElement.selectedSource.URLTimeEncoding ) { |
| 2110 | | - this.seek_time_sec = 0; |
| | 2178 | + this.serverSeekTime = 0; |
| 2111 | 2179 | } else { |
| 2112 | | - this.seek_time_sec = mw.npt2seconds( start_npt ); |
| | 2180 | + this.serverSeekTime = mw.npt2seconds( start_npt ); |
| 2113 | 2181 | } |
| 2114 | 2182 | }, |
| 2115 | 2183 | |
| — | — | @@ -2116,7 +2184,7 @@ |
| 2117 | 2185 | * Render a thumbnail at a given time |
| 2118 | 2186 | * NOTE: Should overwrite by embed library if we can render frames natively |
| 2119 | 2187 | * |
| 2120 | | - * @param {Object} options Options for rendred timeline thumb |
| | 2188 | + * @param {Object} options Options for rendered timeline thumb |
| 2121 | 2189 | */ |
| 2122 | 2190 | renderTimelineThumbnail: function( options ) { |
| 2123 | 2191 | var my_thumb_src = this.mediaElement.getPosterSrc(); |
| — | — | @@ -2248,13 +2316,13 @@ |
| 2249 | 2317 | * download, and embed code. |
| 2250 | 2318 | */ |
| 2251 | 2319 | updatePosterHTML: function () { |
| 2252 | | - mw.log( 'embedPlayer:updatePosterHTML::' + this.id ); |
| | 2320 | + mw.log( 'EmbedPlayer:updatePosterHTML::' + this.id ); |
| 2253 | 2321 | var thumb_html = ''; |
| 2254 | 2322 | var class_atr = ''; |
| 2255 | 2323 | var style_atr = ''; |
| 2256 | 2324 | |
| 2257 | 2325 | |
| 2258 | | - if( this.useNativeControls() ){ |
| | 2326 | + if( this.useNativePlayerControls() ){ |
| 2259 | 2327 | this.showNativePlayer(); |
| 2260 | 2328 | return ; |
| 2261 | 2329 | } |
| — | — | @@ -2295,12 +2363,16 @@ |
| 2296 | 2364 | * @returns boolean true if the mwEmbed player interface should be used |
| 2297 | 2365 | * false if the mwEmbed player interface should not be used |
| 2298 | 2366 | */ |
| 2299 | | - useNativeControls: function() { |
| 2300 | | - if( mw.getConfig('nativePlayerControls') == true ) { |
| | 2367 | + useNativePlayerControls: function() { |
| | 2368 | + if( this.usenativecontrols === true ){ |
| 2301 | 2369 | return true; |
| 2302 | 2370 | } |
| 2303 | | - if( mw.getConfig('nativePlayerControlsMobileSafari' ) && |
| 2304 | | - mw.isMobileSafari() |
| | 2371 | + |
| | 2372 | + if( mw.getConfig('EmbedPlayer.NativeControls') === true ) { |
| | 2373 | + return true; |
| | 2374 | + } |
| | 2375 | + if( mw.getConfig('EmbedPlayer.NativeControlsMobileSafari' ) && |
| | 2376 | + mw.isMobileHTML5() |
| 2305 | 2377 | ){ |
| 2306 | 2378 | return true; |
| 2307 | 2379 | } |
| — | — | @@ -2323,57 +2395,80 @@ |
| 2324 | 2396 | // Remove the player loader spinner if it exists |
| 2325 | 2397 | $j('#loadingSpinner_' + this.id ).remove(); |
| 2326 | 2398 | |
| | 2399 | + |
| 2327 | 2400 | // Check if we need to refresh mobile safari |
| 2328 | | - /*var mobileSafairNeedsRefresh = false; |
| 2329 | | - if( $j( '#' + this.pid ).attr('controls') === false ){ |
| 2330 | | - mobileSafairNeedsRefresh = true; |
| 2331 | | - }*/ |
| | 2401 | + var mobileSafariNeedsRefresh = false; |
| | 2402 | + |
| | 2403 | + // Unhide the original video element if not part of a playerThemer embed |
| | 2404 | + if( !$j( '#' + this.pid ).hasClass('PlayerThemer') ){ |
| | 2405 | + $j( '#' + this.pid ) |
| | 2406 | + .css( { |
| | 2407 | + 'position' : 'absolute' |
| | 2408 | + } ) |
| | 2409 | + .show() |
| | 2410 | + .attr('controls', 'true'); |
| | 2411 | + |
| | 2412 | + mobileSafariNeedsRefresh = true; |
| | 2413 | + } |
| 2332 | 2414 | |
| 2333 | | - // For now always refersh ( buggy display control behavior in iPad ) |
| 2334 | | - mobileSafairNeedsRefresh = true; |
| 2335 | | - |
| 2336 | | - // Unhide the original video element |
| 2337 | | - $j( '#' + this.pid ) |
| 2338 | | - .css( { |
| 2339 | | - 'position' : 'absolute' |
| 2340 | | - } ) |
| 2341 | | - .show() |
| 2342 | | - .attr('controls', 'true'); |
| 2343 | | - |
| 2344 | 2415 | // iPad does not handle video tag update for attributes like "controls" |
| 2345 | 2416 | // so we have to do a full replace ( if controls are not included initially ) |
| 2346 | | - if( mw.isMobileSafari() && mobileSafairNeedsRefresh ) { |
| | 2417 | + if( mw.isMobileHTML5() && mobileSafariNeedsRefresh ) { |
| 2347 | 2418 | var source = this.mediaElement.getSources( 'video/h264' )[0]; |
| 2348 | | - if( ! source.src ){ |
| | 2419 | + if( source && ! source.src ){ |
| 2349 | 2420 | mw.log( 'Error: should have caught no playable sources for mobile safari earlier' ); |
| 2350 | | - } |
| 2351 | | - |
| | 2421 | + } |
| | 2422 | + |
| 2352 | 2423 | var videoAttribues = { |
| 2353 | 2424 | 'id' : _this.pid, |
| 2354 | 2425 | 'poster': _this.poster, |
| 2355 | 2426 | 'src' : source.src, |
| 2356 | 2427 | 'controls' : 'true' |
| 2357 | 2428 | } |
| | 2429 | + |
| 2358 | 2430 | if( this.loop ){ |
| 2359 | 2431 | videoAttribues[ 'loop' ] = 'true'; |
| 2360 | 2432 | } |
| 2361 | 2433 | var cssStyle = { |
| 2362 | 2434 | 'width' : _this.width, |
| 2363 | 2435 | 'height' : _this.height |
| 2364 | | - }; |
| | 2436 | + }; |
| 2365 | 2437 | $j( '#' + this.pid ).replaceWith( |
| 2366 | 2438 | _this.getNativePlayerHtml( videoAttribues, cssStyle ) |
| 2367 | 2439 | ) |
| 2368 | 2440 | // Bind native events: |
| 2369 | 2441 | this.applyMediaElementBindings(); |
| 2370 | 2442 | } |
| | 2443 | + // Android only can play with a special play button ( no native controls in the dom , and no auto-play ) |
| | 2444 | + // and only with 'native display' |
| | 2445 | + if( mw.isAndroid2() ){ |
| | 2446 | + $j( '#' + _this.pid ).siblings('.play-btn-large').remove(); |
| | 2447 | + $j( '#' + _this.pid ).after( |
| | 2448 | + $j('<div />') |
| | 2449 | + .css({ |
| | 2450 | + 'position' : 'relative', |
| | 2451 | + 'top' : -1 * ( .5 * _this.getPlayerHeight() ) - 52, |
| | 2452 | + 'left' : ( .5 * _this.getPlayerWidth() ) - 75 |
| | 2453 | + }) |
| | 2454 | + .attr( { |
| | 2455 | + 'title' : gM( 'mwe-embedplayer-play_clip' ), |
| | 2456 | + 'class' : "ui-state-default play-btn-large" |
| | 2457 | + } ) |
| | 2458 | + .click( function() { |
| | 2459 | + _this.play(); |
| | 2460 | + // no need to hide the play button since android plays fullscreen |
| | 2461 | + } ) |
| | 2462 | + ) |
| | 2463 | + } |
| 2371 | 2464 | return ; |
| 2372 | 2465 | }, |
| 2373 | 2466 | /** |
| 2374 | 2467 | * Should be set via native embed support |
| 2375 | 2468 | */ |
| 2376 | 2469 | getNativePlayerHtml: function(){ |
| 2377 | | - return $j('<div />' ).html( 'Error: Trying to get native html5 player without native support for codec' ); |
| | 2470 | + return $j('<div />' ) |
| | 2471 | + .css( 'width', this.getWidth() ) |
| | 2472 | + .html( 'Error: Trying to get native html5 player without native support for codec' ); |
| 2378 | 2473 | }, |
| 2379 | 2474 | /** |
| 2380 | 2475 | * Should be set via native embed support |
| — | — | @@ -2386,7 +2481,7 @@ |
| 2387 | 2482 | * Gets code to embed the player remotely for "share" this player links |
| 2388 | 2483 | */ |
| 2389 | 2484 | getEmbeddingHTML: function() { |
| 2390 | | - switch( mw.getConfig( 'shareEmbedMode' ) ){ |
| | 2485 | + switch( mw.getConfig( 'EmbedPlayer.ShareEmbedMode' ) ){ |
| 2391 | 2486 | case 'object': |
| 2392 | 2487 | return this.getShareEmbedObject() |
| 2393 | 2488 | break; |
| — | — | @@ -2409,6 +2504,10 @@ |
| 2410 | 2505 | } else if( this.apiTitleKey ) { |
| 2411 | 2506 | iframeUrl += 'apiTitleKey=' + escape( this.apiTitleKey ) + '&'; |
| 2412 | 2507 | if ( this.apiProvider ) { |
| | 2508 | + // Commons always uses the commons api provider ( special hack should refactor ) |
| | 2509 | + if( mw.parseUri( document.URL ).host == 'commons.wikimedia.org'){ |
| | 2510 | + this.apiProvider = 'commons'; |
| | 2511 | + } |
| 2413 | 2512 | iframeUrl += 'apiProvider=' + escape( this.apiProvider ) + '&'; |
| 2414 | 2513 | } |
| 2415 | 2514 | } else { |
| — | — | @@ -2538,7 +2637,7 @@ |
| 2539 | 2638 | doLinkBack: function() { |
| 2540 | 2639 | if ( ! this.linkback && this.roe && this.mediaElement.addedROEData == false ) { |
| 2541 | 2640 | var _this = this; |
| 2542 | | - this.displayOverlay( gM( 'mwe-embedplayer-loading_txt' ) ); |
| | 2641 | + this.displayMenuOverlay( gM( 'mwe-embedplayer-loading_txt' ) ); |
| 2543 | 2642 | this.getMvJsonUrl( this.roe, function( data ) { |
| 2544 | 2643 | _this.mediaElement.addROE( data ); |
| 2545 | 2644 | _this.doLinkBack(); |
| — | — | @@ -2549,7 +2648,7 @@ |
| 2550 | 2649 | } else if ( this.mediaElement.linkback ) { |
| 2551 | 2650 | window.location = this.mediaElement.linkback; |
| 2552 | 2651 | } else { |
| 2553 | | - this.displayOverlay( gM( 'mwe-embedplayer-could_not_find_linkback' ) ); |
| | 2652 | + this.displayMenuOverlay( gM( 'mwe-embedplayer-could_not_find_linkback' ) ); |
| 2554 | 2653 | } |
| 2555 | 2654 | } |
| 2556 | 2655 | }, |
| — | — | @@ -2561,15 +2660,15 @@ |
| 2562 | 2661 | /** |
| 2563 | 2662 | * The Play Action |
| 2564 | 2663 | * |
| 2565 | | - * Handles play requests, updates relevet states: |
| | 2664 | + * Handles play requests, updates relevant states: |
| 2566 | 2665 | * seeking =false |
| 2567 | 2666 | * paused = false |
| 2568 | 2667 | * Updates pause button |
| 2569 | 2668 | * Starts the "monitor" |
| 2570 | 2669 | */ |
| 2571 | 2670 | play: function() { |
| 2572 | | - var _this = this; |
| 2573 | | - mw.log( "EmbedPlayer:: play" ); |
| | 2671 | + var _this = this; |
| | 2672 | + mw.log( "EmbedPlayer:: play" ); |
| 2574 | 2673 | // Hide any overlay: |
| 2575 | 2674 | this.controlBuilder.closeMenuOverlay(); |
| 2576 | 2675 | |
| — | — | @@ -2578,17 +2677,24 @@ |
| 2579 | 2678 | if ( !this.selectedPlayer ) { |
| 2580 | 2679 | mw.log( 'no selectedPlayer' ); |
| 2581 | 2680 | this.showPluginMissingHTML(); |
| | 2681 | + return; |
| 2582 | 2682 | } else { |
| 2583 | 2683 | this.thumbnail_disp = false; |
| 2584 | | - this.paused = false; |
| 2585 | | - this.doEmbedPlayer(); |
| | 2684 | + this.doEmbedHTML(); |
| 2586 | 2685 | } |
| 2587 | 2686 | } else { |
| 2588 | 2687 | // the plugin is already being displayed |
| 2589 | | - this.paused = false; // make sure we are not "paused" |
| 2590 | 2688 | this.seeking = false; |
| 2591 | 2689 | } |
| 2592 | 2690 | |
| | 2691 | + // Run play hook (if we were previously in paused state ) |
| | 2692 | + if( this.paused ){ |
| | 2693 | + this.paused = false; |
| | 2694 | + mw.log("trigger play event::"); |
| | 2695 | + $j( this ).trigger( 'play' ); |
| | 2696 | + } |
| | 2697 | + |
| | 2698 | + |
| 2593 | 2699 | this.$interface.find('.play-btn span') |
| 2594 | 2700 | .removeClass( 'ui-icon-play' ) |
| 2595 | 2701 | .addClass( 'ui-icon-pause' ); |
| — | — | @@ -2600,19 +2706,18 @@ |
| 2601 | 2707 | _this.pause(); |
| 2602 | 2708 | } ) |
| 2603 | 2709 | .attr( 'title', gM( 'mwe-embedplayer-pause_clip' ) ); |
| 2604 | | - |
| 2605 | | - |
| 2606 | | - //Run play hook: |
| 2607 | | - mw.log("playEvent"); |
| 2608 | | - $j( this ).trigger( 'playEvent' ); |
| 2609 | | - |
| 2610 | | - // If we previously finished playing this clip run the "replay hook" |
| 2611 | | - if( this.donePlayingCount > 0 ) { |
| | 2710 | + |
| | 2711 | + // Start the monitor if not already started |
| | 2712 | + this.monitor(); |
| | 2713 | + |
| | 2714 | + // If we previously finished playing this clip run the "replay hook" |
| | 2715 | + if( this.donePlayingCount > 0 ) { |
| 2612 | 2716 | mw.log("replayEvent"); |
| 2613 | 2717 | $j( this ).trigger( 'replayEvent' ); |
| 2614 | | - } |
| | 2718 | + } |
| 2615 | 2719 | }, |
| 2616 | 2720 | |
| | 2721 | + |
| 2617 | 2722 | /** |
| 2618 | 2723 | * Maps the html5 load request. There is no general way to "load" clips so |
| 2619 | 2724 | * underling plugin-player libs should override. |
| — | — | @@ -2629,11 +2734,15 @@ |
| 2630 | 2735 | * There is no general way to pause the video |
| 2631 | 2736 | * must be overwritten by embed object to support this functionality. |
| 2632 | 2737 | */ |
| 2633 | | - pause: function() { |
| 2634 | | - var _this = this; |
| 2635 | | - // mw.log('mwEmbed:do pause'); |
| 2636 | | - // (playing) do pause |
| 2637 | | - this.paused = true; |
| | 2738 | + pause: function( event ) { |
| | 2739 | + var _this = this; |
| | 2740 | + |
| | 2741 | + // only trigger the pause event if not already in paused state: |
| | 2742 | + if( this.paused === false ){ |
| | 2743 | + this.paused = true; |
| | 2744 | + mw.log('EmbedPlayer:trigger pause'); |
| | 2745 | + //$j( this ).trigger('pause' ); |
| | 2746 | + } |
| 2638 | 2747 | |
| 2639 | 2748 | // update the ctrl "paused state" |
| 2640 | 2749 | this.$interface.find('.play-btn span' ) |
| — | — | @@ -2646,7 +2755,7 @@ |
| 2647 | 2756 | .click( function() { |
| 2648 | 2757 | _this.play(); |
| 2649 | 2758 | } ) |
| 2650 | | - .attr( 'title', gM( 'mwe-embedplayer-play_clip' ) ); |
| | 2759 | + .attr( 'title', gM( 'mwe-embedplayer-play_clip' ) ); |
| 2651 | 2760 | }, |
| 2652 | 2761 | |
| 2653 | 2762 | /** |
| — | — | @@ -2660,37 +2769,34 @@ |
| 2661 | 2770 | */ |
| 2662 | 2771 | stop: function() { |
| 2663 | 2772 | var _this = this; |
| 2664 | | - mw.log( 'mvEmbed:stop:' + this.id ); |
| | 2773 | + mw.log( 'EmbedPlayer::stop:' + this.id ); |
| | 2774 | + |
| 2665 | 2775 | // no longer seeking: |
| 2666 | 2776 | this.didSeekJump = false; |
| 2667 | 2777 | |
| 2668 | | - // reset current time and prev time |
| 2669 | | - this.currentTime = this.previousTime = 0; |
| | 2778 | + // Reset current time and prev time and seek offset |
| | 2779 | + this.currentTime = this.previousTime = this.serverSeekTime = 0; |
| 2670 | 2780 | |
| 2671 | | - // Previous player set time |
| | 2781 | + // Issue pause to update interface (only call this parent) |
| | 2782 | + if( !this.paused ){ |
| | 2783 | + this.paused = true; |
| | 2784 | + // update the interface |
| | 2785 | + if ( this['parent_pause'] ) { |
| | 2786 | + this.parent_pause(); |
| | 2787 | + } else { |
| | 2788 | + this.pause(); |
| | 2789 | + } |
| | 2790 | + } |
| 2672 | 2791 | |
| 2673 | | - // First issue pause to update interface (only call this parent) |
| 2674 | | - if ( this['parent_pause'] ) { |
| 2675 | | - this.parent_pause(); |
| 2676 | | - } else { |
| 2677 | | - this.pause(); |
| 2678 | | - } |
| | 2792 | + // Rewrite the html to thumbnail disp |
| | 2793 | + this.showThumbnail(); |
| | 2794 | + this.bufferedPercent = 0; // reset buffer state |
| | 2795 | + this.controlBuilder.setStatus( this.getTimeRange() ); |
| 2679 | 2796 | |
| 2680 | | - // Reset the currentTime: |
| 2681 | | - this.currentTime = 0; |
| | 2797 | + // Reset the playhead |
| | 2798 | + mw.log("EmbedPlayer::Stop:: Reset play head") |
| | 2799 | + this.updatePlayHead( 0 ); |
| 2682 | 2800 | |
| 2683 | | - // Check if thumbnail is being displayed in which case do nothing |
| 2684 | | - if ( this.thumbnail_disp ) { |
| 2685 | | - // already in stooped state |
| 2686 | | - mw.log( 'already in stopped state' ); |
| 2687 | | - } else { |
| 2688 | | - // rewrite the html to thumbnail disp |
| 2689 | | - this.showThumbnail(); |
| 2690 | | - this.bufferedPercent = 0; // reset buffer state |
| 2691 | | - this.updatePlayHead( 0 ); |
| 2692 | | - this.controlBuilder.setStatus( this.getTimeRange() ); |
| 2693 | | - } |
| 2694 | | - |
| 2695 | 2801 | //Bind play-btn-large play |
| 2696 | 2802 | this.$interface.find( '.play-btn-large' ) |
| 2697 | 2803 | .unbind( 'click' ) |
| — | — | @@ -2715,7 +2821,7 @@ |
| 2716 | 2822 | this.preMuteVolume = this.volume; |
| 2717 | 2823 | var percent = 0; |
| 2718 | 2824 | } |
| 2719 | | - this.setVolume( percent ); |
| | 2825 | + this.setVolume( percent ); |
| 2720 | 2826 | // Update the interface |
| 2721 | 2827 | this.setInterfaceVolume( percent ); |
| 2722 | 2828 | }, |
| — | — | @@ -2732,7 +2838,7 @@ |
| 2733 | 2839 | // Set the local volume attribute |
| 2734 | 2840 | this.previousVolume = this.volume = percent; |
| 2735 | 2841 | |
| 2736 | | - // Un-mute if setting possitive volume |
| | 2842 | + // Un-mute if setting positive volume |
| 2737 | 2843 | if( percent != 0 ){ |
| 2738 | 2844 | this.muted = false; |
| 2739 | 2845 | } |
| — | — | @@ -2741,12 +2847,13 @@ |
| 2742 | 2848 | this.setPlayerElementVolume( percent ); |
| 2743 | 2849 | |
| 2744 | 2850 | //mw.log(" setVolume:: " + percent + ' this.volume is: ' + this.volume); |
| | 2851 | + $j( this ).trigger('volumeChanged', percent ); |
| 2745 | 2852 | }, |
| 2746 | 2853 | |
| 2747 | 2854 | /** |
| 2748 | 2855 | * Updates the interface volume |
| 2749 | 2856 | * TODO should move to controlBuilder |
| 2750 | | - * @param {float} percent Pecentage volume to update interface |
| | 2857 | + * @param {float} percent Percentage volume to update interface |
| 2751 | 2858 | */ |
| 2752 | 2859 | setInterfaceVolume: function( percent ) { |
| 2753 | 2860 | if( this.supports[ 'volumeControl' ] && |
| — | — | @@ -2757,24 +2864,24 @@ |
| 2758 | 2865 | }, |
| 2759 | 2866 | |
| 2760 | 2867 | /** |
| 2761 | | - * Abstract Update volumen Method must be overided by plug-in / player interface |
| | 2868 | + * Abstract Update volume Method must be override by plug-in / player interface |
| 2762 | 2869 | */ |
| 2763 | 2870 | setPlayerElementVolume: function( percent ) { |
| 2764 | | - mw.log(' error player does not support volume adjustment' ); |
| | 2871 | + mw.log('Error player does not support volume adjustment' ); |
| 2765 | 2872 | }, |
| 2766 | 2873 | |
| 2767 | 2874 | /** |
| 2768 | | - * Abstract get volumen Method must be overided by plug-in / player interface |
| 2769 | | - * (if player does not ovrride we return the abstract player value ) |
| | 2875 | + * Abstract get volume Method must be override by plug-in / player interface |
| | 2876 | + * (if player does not override we return the abstract player value ) |
| 2770 | 2877 | */ |
| 2771 | 2878 | getPlayerElementVolume: function(){ |
| 2772 | | - //mw.log(' error player does not support geting volume property' ); |
| | 2879 | + //mw.log(' error player does not support getting volume property' ); |
| 2773 | 2880 | return this.volume; |
| 2774 | 2881 | }, |
| 2775 | 2882 | |
| 2776 | 2883 | /** |
| 2777 | | - * Abstract get volumen muted property must be overided by plug-in / player interface |
| 2778 | | - * (if player does not ovride we return the abstract player value ) |
| | 2884 | + * Abstract get volume muted property must be overwritten by plug-in / player interface |
| | 2885 | + * (if player does not override we return the abstract player value ) |
| 2779 | 2886 | */ |
| 2780 | 2887 | getPlayerElementMuted: function(){ |
| 2781 | 2888 | //mw.log(' error player does not support getting mute property' ); |
| — | — | @@ -2830,7 +2937,7 @@ |
| 2831 | 2938 | * true if stopped |
| 2832 | 2939 | * false if playing |
| 2833 | 2940 | */ |
| 2834 | | - isStoped: function() { |
| | 2941 | + isStopped: function() { |
| 2835 | 2942 | return this.thumbnail_disp; |
| 2836 | 2943 | }, |
| 2837 | 2944 | |
| — | — | @@ -2845,7 +2952,7 @@ |
| 2846 | 2953 | */ |
| 2847 | 2954 | checkForCurrentTimeSeek: function(){ |
| 2848 | 2955 | var _this = this; |
| 2849 | | - // Check if a javascript currentTime change based seek has occured |
| | 2956 | + // Check if a javascript currentTime change based seek has occurred |
| 2850 | 2957 | if( _this.previousTime != _this.currentTime && !this.userSlide && !this.seeking){ |
| 2851 | 2958 | // If the time has been updated and is in range issue a seek |
| 2852 | 2959 | if( _this.getDuration() && _this.currentTime <= _this.getDuration() ){ |
| — | — | @@ -2868,30 +2975,40 @@ |
| 2869 | 2976 | this.checkForCurrentTimeSeek(); |
| 2870 | 2977 | |
| 2871 | 2978 | // Update currentTime via embedPlayer |
| 2872 | | - _this.currentTime = _this.getPlayerElementTime(); |
| 2873 | | - |
| | 2979 | + _this.currentTime = _this.getPlayerElementTime(); |
| | 2980 | + |
| | 2981 | + // Update any offsets from server seek |
| | 2982 | + if( _this.serverSeekTime && _this.supportsURLTimeEncoding ){ |
| | 2983 | + _this.currentTime = _this.serverSeekTime + _this.getPlayerElementTime() |
| | 2984 | + } |
| | 2985 | + |
| 2874 | 2986 | // Update the previousTime ( so we can know if the user-javascript changed currentTime ) |
| 2875 | 2987 | _this.previousTime = _this.currentTime; |
| 2876 | 2988 | |
| 2877 | 2989 | |
| 2878 | 2990 | // Check if volume was set outside of embed player function |
| 2879 | 2991 | //mw.log( ' this.volume: ' + _this.volume + ' prev Volume:: ' + _this.previousVolume ); |
| 2880 | | - if( _this.volume != _this.previousVolume ) { |
| | 2992 | + if( Math.round( _this.volume * 100 ) != Math.round( _this.previousVolume * 100 ) ) { |
| 2881 | 2993 | _this.setInterfaceVolume( _this.volume ); |
| | 2994 | + $j( this ).trigger('volumeChanged', _this.volume ); |
| 2882 | 2995 | } |
| 2883 | | - // Update the previus volume |
| 2884 | | - _this.previousVolume = _this.volume; |
| | 2996 | + |
| | 2997 | + // Update the previous volume |
| | 2998 | + _this.previousVolume = _this.volume; |
| | 2999 | + |
| 2885 | 3000 | // Update the volume from the player element |
| 2886 | 3001 | _this.volume = this.getPlayerElementVolume(); |
| 2887 | 3002 | |
| 2888 | 3003 | // update the mute state from the player element |
| 2889 | | - if( _this.muted != _this.getPlayerElementMuted() ){ |
| 2890 | | - mw.log("monitor:: muted does not mach embed player" ); |
| 2891 | | - this.toggleMute(); |
| 2892 | | - } |
| 2893 | | - |
| 2894 | | - //mw.log(' ct: ' + this.currentTime + ' dur: ' + ( parseInt( this.duration ) + 1 ) + ' is seek: ' + this.seeking ); |
| 2895 | | - if ( this.currentTime && this.currentTime > 0 && this.duration ) { |
| | 3004 | + if( _this.muted != _this.getPlayerElementMuted() && ! _this.isStopped() ){ |
| | 3005 | + mw.log( "EmbedPlayer::monitor: muted does not mach embed player" ); |
| | 3006 | + _this.toggleMute(); |
| | 3007 | + // Make sure they match: |
| | 3008 | + _this.muted = _this.getPlayerElementMuted(); |
| | 3009 | + } |
| | 3010 | + |
| | 3011 | + //mw.log( 'Monitor:: ' + this.currentTime + ' duration: ' + ( parseInt( this.getDuration() ) + 1 ) + ' is seeking: ' + this.seeking ); |
| | 3012 | + if ( this.currentTime >= 0 && this.duration ) { |
| 2896 | 3013 | if ( !this.userSlide && !this.seeking ) { |
| 2897 | 3014 | if ( parseInt( this.startOffset ) != 0 ) { |
| 2898 | 3015 | // If start offset include that calculation |
| — | — | @@ -2913,7 +3030,7 @@ |
| 2914 | 3031 | } |
| 2915 | 3032 | } else { |
| 2916 | 3033 | // Media lacks duration just show end time |
| 2917 | | - if ( this.isStoped() ) { |
| | 3034 | + if ( this.isStopped() ) { |
| 2918 | 3035 | this.controlBuilder.setStatus( this.getTimeRange() ); |
| 2919 | 3036 | } else if ( this.isPaused() ) { |
| 2920 | 3037 | this.controlBuilder.setStatus( gM( 'mwe-embedplayer-paused' ) ); |
| — | — | @@ -2936,19 +3053,26 @@ |
| 2937 | 3054 | $j( this ).trigger( 'progress', this.progressEventData ); |
| 2938 | 3055 | } |
| 2939 | 3056 | |
| 2940 | | - // Call monitor at 250ms interval. |
| 2941 | | - if( ! this.isStoped() ) { |
| 2942 | | - setTimeout( function(){ |
| 2943 | | - _this.monitor(); |
| 2944 | | - }, 250 ) |
| 2945 | | - } |
| | 3057 | + // Call monitor at 250ms interval. ( use setInterval to avoid stacking monitor requests ) |
| | 3058 | + if( ! this.isStopped() ) { |
| | 3059 | + if( !this.monitorInterval ){ |
| | 3060 | + this.monitorInterval = setInterval( function(){ |
| | 3061 | + if( _this.monitor ) |
| | 3062 | + _this.monitor(); |
| | 3063 | + }, this.monitorRate ) |
| | 3064 | + } |
| | 3065 | + } else { |
| | 3066 | + // If stopped "stop" monitor: |
| | 3067 | + clearInterval( this.monitorInterval ); |
| | 3068 | + this.monitorInterval = 0; |
| | 3069 | + } |
| 2946 | 3070 | |
| 2947 | 3071 | //mw.log('trigger:monitor:: ' + this.currentTime ); |
| 2948 | 3072 | $j( this ).trigger( 'monitorEvent' ); |
| 2949 | 3073 | }, |
| 2950 | 3074 | |
| 2951 | 3075 | /** |
| 2952 | | - * Abstarct getPlayerElementTime function |
| | 3076 | + * Abstract getPlayerElementTime function |
| 2953 | 3077 | */ |
| 2954 | 3078 | getPlayerElementTime: function(){ |
| 2955 | 3079 | mw.log("Error: getPlayerElementTime should be implemented by embed library"); |
| — | — | @@ -2957,18 +3081,21 @@ |
| 2958 | 3082 | /** |
| 2959 | 3083 | * Update the Buffer status based on the local bufferedPercent var |
| 2960 | 3084 | */ |
| 2961 | | - updateBufferStatus: function() { |
| | 3085 | + updateBufferStatus: function() { |
| | 3086 | + |
| 2962 | 3087 | // Get the buffer target based for playlist vs clip |
| 2963 | 3088 | $buffer = this.$interface.find( '.mw_buffer' ); |
| 2964 | 3089 | // Update the buffer progress bar (if available ) |
| 2965 | 3090 | if ( this.bufferedPercent != 0 ) { |
| 2966 | | - // mw.log('bufferedPercent: ' + this.bufferedPercent); |
| 2967 | | - if ( this.bufferedPercent > 1 ) |
| | 3091 | + //mw.log('Update buffer css: ' + ( this.bufferedPercent * 100 ) + '% ' + $buffer.length ); |
| | 3092 | + if ( this.bufferedPercent > 1 ){ |
| 2968 | 3093 | this.bufferedPercent = 1; |
| | 3094 | + } |
| 2969 | 3095 | |
| 2970 | 3096 | $buffer.css({ |
| 2971 | 3097 | "width" : ( this.bufferedPercent * 100 ) + '%' |
| 2972 | 3098 | }); |
| | 3099 | + $j( this ).trigger( 'updateBufferPercent', this.bufferedPercent ); |
| 2973 | 3100 | } else { |
| 2974 | 3101 | $buffer.css( "width", '0px' ); |
| 2975 | 3102 | } |
| — | — | @@ -2992,16 +3119,18 @@ |
| 2993 | 3120 | * |
| 2994 | 3121 | * @param {Float} perc Value between 0 and 1 for position of playhead |
| 2995 | 3122 | */ |
| 2996 | | - updatePlayHead: function( perc ) { |
| 2997 | | - $play_head = this.$interface.find( '.play_head' ); |
| 2998 | | - if ( this.controls && $play_head.length != 0 ) { |
| | 3123 | + updatePlayHead: function( perc ) { |
| | 3124 | + $playHead = this.$interface.find( '.play_head' ); |
| | 3125 | + if ( this.controls && $playHead.length != 0 ) { |
| 2999 | 3126 | var val = parseInt( perc * 1000 ); |
| 3000 | | - $play_head.slider( 'value', val ); |
| 3001 | | - } |
| | 3127 | + $playHead.slider( 'value', val ); |
| | 3128 | + } |
| | 3129 | + // @@todo should have 'progress' trigger the same as html5 |
| | 3130 | + $j( this ).trigger('updatePlayHeadPercent', perc); |
| 3002 | 3131 | }, |
| 3003 | 3132 | |
| 3004 | 3133 | /** |
| 3005 | | - * Highligh a section of video on the playhead |
| | 3134 | + * Highlight a section of video on the playhead |
| 3006 | 3135 | * |
| 3007 | 3136 | * @param {Object} options Provides "start" time & "end" time to highlight |
| 3008 | 3137 | */ |
| — | — | @@ -3042,9 +3171,9 @@ |
| 3043 | 3172 | } ).show(); |
| 3044 | 3173 | |
| 3045 | 3174 | this.jump_time = options['start']; |
| 3046 | | - this.seek_time_sec = mw.npt2seconds( options['start'] ); |
| | 3175 | + this.serverSeekTime = mw.npt2seconds( options['start'] ); |
| 3047 | 3176 | // trim output to |
| 3048 | | - this.controlBuilder.setStatus( gM( 'mwe-embedplayer-seek_to', mw.seconds2npt( this.seek_time_sec ) ) ); |
| | 3177 | + this.controlBuilder.setStatus( gM( 'mwe-embedplayer-seek_to', mw.seconds2npt( this.serverSeekTime ) ) ); |
| 3049 | 3178 | mw.log( 'DO update: ' + this.jump_time ); |
| 3050 | 3179 | this.updateThumbTime( rel_start_sec ); |
| 3051 | 3180 | }, |
| — | — | @@ -3070,7 +3199,7 @@ |
| 3071 | 3200 | */ |
| 3072 | 3201 | getSrc: function() { |
| 3073 | 3202 | if( this.mediaElement.selectedSource ){ |
| 3074 | | - return this.mediaElement.selectedSource.getSrc( this.seek_time_sec ); |
| | 3203 | + return this.mediaElement.selectedSource.getSrc( this.serverSeekTime ); |
| 3075 | 3204 | } |
| 3076 | 3205 | return false; |
| 3077 | 3206 | }, |
| — | — | @@ -3151,8 +3280,8 @@ |
| 3152 | 3281 | load: function( callback ) { |
| 3153 | 3282 | //Load player library ( upper case the first letter of the library ) |
| 3154 | 3283 | mw.load( [ |
| 3155 | | - 'mw.EmbedPlayer' + this.library[0].toUpperCase() + this.library.substr(1) |
| 3156 | | - ], function() { |
| | 3284 | + 'mw.EmbedPlayer' + this.library.substr(0,1).toUpperCase() + this.library.substr(1) |
| | 3285 | + ], function() { |
| 3157 | 3286 | callback(); |
| 3158 | 3287 | } ); |
| 3159 | 3288 | } |
| — | — | @@ -3161,7 +3290,7 @@ |
| 3162 | 3291 | /** |
| 3163 | 3292 | * players and supported mime types |
| 3164 | 3293 | * In an ideal world we would query the plugin to get what mime |
| 3165 | | -* types it supports in practice not always reliable/avaliable |
| | 3294 | +* types it supports in practice not always reliable/available |
| 3166 | 3295 | * |
| 3167 | 3296 | * We can't cleanly store these values per library since player library is loaded post player detection |
| 3168 | 3297 | * |
| — | — | @@ -3174,13 +3303,13 @@ |
| 3175 | 3304 | // Java based player |
| 3176 | 3305 | var cortadoPlayer = new mediaPlayer( 'cortado', ['video/ogg', 'audio/ogg', 'application/ogg'], 'Java' ); |
| 3177 | 3306 | |
| 3178 | | -// Native html5 player |
| | 3307 | +// Native html5 players |
| 3179 | 3308 | var oggNativePlayer = new mediaPlayer( 'oggNative', ['video/ogg', 'audio/ogg', 'application/ogg' ], 'Native' ); |
| 3180 | | - |
| 3181 | 3309 | var h264NativePlayer = new mediaPlayer( 'h264Native', ['video/h264'], 'Native' ); |
| | 3310 | +var webmNativePlayer = new mediaPlayer( 'webmNative', ['video/webm'], 'Native' ); |
| 3182 | 3311 | |
| 3183 | 3312 | // VLC player |
| 3184 | | -var vlcMineList = ['video/ogg', 'audio/ogg', 'application/ogg', 'video/x-flv', 'video/mp4', 'video/h264']; |
| | 3313 | +var vlcMineList = ['video/ogg', 'audio/ogg', 'application/ogg', 'video/x-flv', 'video/mp4', 'video/h264', 'video/x-msvideo', 'video/mpeg']; |
| 3185 | 3314 | var vlcPlayer = new mediaPlayer( 'vlc-player', vlcMineList, 'Vlc' ); |
| 3186 | 3315 | |
| 3187 | 3316 | // Generic plugin |
| — | — | @@ -3226,6 +3355,8 @@ |
| 3227 | 3356 | this.defaultPlayers['application/ogg'] = ['Native', 'Vlc', 'Java', 'Generic']; |
| 3228 | 3357 | this.defaultPlayers['audio/ogg'] = ['Native', 'Vlc', 'Java' ]; |
| 3229 | 3358 | this.defaultPlayers['video/mp4'] = ['Vlc']; |
| | 3359 | + this.defaultPlayers['video/mpeg'] = ['Vlc']; |
| | 3360 | + this.defaultPlayers['video/x-msvideo'] = ['Vlc']; |
| 3230 | 3361 | |
| 3231 | 3362 | this.defaultPlayers['text/html'] = ['Html']; |
| 3232 | 3363 | this.defaultPlayers['image/jpeg'] = ['Html']; |
| — | — | @@ -3330,11 +3461,11 @@ |
| 3331 | 3462 | * @param {String} mimeType Mime type for the associated player stream |
| 3332 | 3463 | */ |
| 3333 | 3464 | setPlayerPreference : function( playerId, mimeType ) { |
| 3334 | | - var selectedPlayer = null; |
| | 3465 | + var selectedPlayer = null; |
| 3335 | 3466 | for ( var i = 0; i < this.players.length; i++ ) { |
| 3336 | 3467 | if ( this.players[i].id == playerId ) { |
| 3337 | 3468 | selectedPlayer = this.players[i]; |
| 3338 | | - mw.log( 'choosing ' + playerId + ' for ' + mimeType ); |
| | 3469 | + mw.log( 'EmbedPlayer::setPlayerPreference: choosing ' + playerId + ' for ' + mimeType ); |
| 3339 | 3470 | this.preference[ mimeType ] = playerId; |
| 3340 | 3471 | mw.setUserConfig( 'playerPref', this.preference ); |
| 3341 | 3472 | break; |
| — | — | @@ -3348,7 +3479,7 @@ |
| 3349 | 3480 | if ( embed.mediaElement.selectedSource && ( embed.mediaElement.selectedSource.mimeType == mimeType ) ) |
| 3350 | 3481 | { |
| 3351 | 3482 | embed.selectPlayer( selectedPlayer ); |
| 3352 | | - mw.log( 'using ' + embed.selectedPlayer.getName() + ' for ' + embed.mediaElement.selectedSource.getTitle() ); |
| | 3483 | + mw.log( 'EmbedPlayer::setPlayerPreference: using ' + embed.selectedPlayer.getName() + ' for ' + embed.mediaElement.selectedSource.getTitle() ); |
| 3353 | 3484 | } |
| 3354 | 3485 | } |
| 3355 | 3486 | } |
| — | — | @@ -3414,12 +3545,17 @@ |
| 3415 | 3546 | this.players.addPlayer( htmlPlayer ); |
| 3416 | 3547 | // In Mozilla, navigator.javaEnabled() only tells us about preferences, we need to |
| 3417 | 3548 | // search navigator.mimeTypes to see if it's installed |
| 3418 | | - var javaEnabled = navigator.javaEnabled(); |
| | 3549 | + try{ |
| | 3550 | + var javaEnabled = navigator.javaEnabled(); |
| | 3551 | + } catch ( e ){ |
| | 3552 | + |
| | 3553 | + } |
| 3419 | 3554 | // Some browsers filter out duplicate mime types, hiding some plugins |
| 3420 | 3555 | var uniqueMimesOnly = $j.browser.opera || $j.browser.safari; |
| | 3556 | + |
| 3421 | 3557 | // Opera will switch off javaEnabled in preferences if java can't be found. |
| 3422 | 3558 | // And it doesn't register an application/x-java-applet mime type like Mozilla does. |
| 3423 | | - if ( javaEnabled ) { |
| | 3559 | + if ( javaEnabled && ( navigator.appName == 'Opera' ) ) { |
| 3424 | 3560 | this.players.addPlayer( cortadoPlayer ); |
| 3425 | 3561 | } |
| 3426 | 3562 | |
| — | — | @@ -3439,6 +3575,7 @@ |
| 3440 | 3576 | if ( this.testActiveX( 'JavaWebStart.isInstalled' ) ) { |
| 3441 | 3577 | this.players.addPlayer( cortadoPlayer ); |
| 3442 | 3578 | } |
| | 3579 | + |
| 3443 | 3580 | // quicktime (currently off) |
| 3444 | 3581 | // if ( this.testActiveX( 'QuickTimeCheckObject.QuickTimeCheck.1' ) ) |
| 3445 | 3582 | // this.players.addPlayer(quicktimeActiveXPlayer); |
| — | — | @@ -3451,14 +3588,22 @@ |
| 3452 | 3589 | try { |
| 3453 | 3590 | var dummyvid = document.createElement( "video" ); |
| 3454 | 3591 | if( dummyvid.canPlayType ) { |
| 3455 | | - var canPlayH264 = dummyvid.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ); |
| 3456 | | - var canPlayOgg = dummyvid.canPlayType && dummyvid.canPlayType( "video/ogg;codecs=\"theora,vorbis\"" ); |
| | 3592 | + // Add the webm player |
| | 3593 | + if( dummyvid.canPlayType('video/webm; codecs="vp8, vorbis"') ){ |
| | 3594 | + this.players.addPlayer( webmNativePlayer ); |
| | 3595 | + } |
| | 3596 | + |
| 3457 | 3597 | // Test for h264: |
| 3458 | | - if ( canPlayH264 == "probably" || canPlayH264 == "maybe" ) { |
| | 3598 | + if ( dummyvid.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"' ) ) { |
| 3459 | 3599 | this.players.addPlayer( h264NativePlayer ); |
| 3460 | 3600 | } |
| 3461 | | - // Test for ogg |
| 3462 | | - if ( canPlayOgg == "probably" || canPlayOgg == "maybe" ) { |
| | 3601 | + // For now if Android assume we support h264Native (FIXME test on real devices ) |
| | 3602 | + if ( mw.isAndroid2() ){ |
| | 3603 | + this.players.addPlayer( h264NativePlayer ); |
| | 3604 | + } |
| | 3605 | + |
| | 3606 | + // Test for ogg |
| | 3607 | + if ( dummyvid.canPlayType( 'video/ogg; codecs="theora,vorbis"' ) ) { |
| 3463 | 3608 | this.players.addPlayer( oggNativePlayer ); |
| 3464 | 3609 | // older versions of safari do not support canPlayType, |
| 3465 | 3610 | // but xiph qt registers mimetype via quicktime plugin |
| — | — | @@ -3469,7 +3614,7 @@ |
| 3470 | 3615 | } catch ( e ) { |
| 3471 | 3616 | mw.log( 'could not run canPlayType ' + e ); |
| 3472 | 3617 | } |
| 3473 | | - } |
| | 3618 | + } |
| 3474 | 3619 | |
| 3475 | 3620 | // "navigator" plugins |
| 3476 | 3621 | if ( navigator.mimeTypes && navigator.mimeTypes.length > 0 ) { |
| — | — | @@ -3495,6 +3640,11 @@ |
| 3496 | 3641 | continue; |
| 3497 | 3642 | } |
| 3498 | 3643 | |
| | 3644 | + if ( (type == 'video/mpeg' || type=='video/x-msvideo') && |
| | 3645 | + pluginName.toLowerCase() == 'vlc multimedia plugin' ) { |
| | 3646 | + this.players.addPlayer( vlcMozillaPlayer ); |
| | 3647 | + } |
| | 3648 | + |
| 3499 | 3649 | if ( type == 'application/ogg' ) { |
| 3500 | 3650 | if ( pluginName.toLowerCase() == 'vlc multimedia plugin' ) { |
| 3501 | 3651 | this.players.addPlayer( vlcMozillaPlayer ); |
| — | — | @@ -3544,7 +3694,7 @@ |
| 3545 | 3695 | * @param {String} name Name of ActiveXObject to look for |
| 3546 | 3696 | */ |
| 3547 | 3697 | testActiveX : function ( name ) { |
| 3548 | | - mw.log(" test testActiveX: " + name); |
| | 3698 | + mw.log("EmbedPlayer::detect: test testActiveX: " + name); |
| 3549 | 3699 | var hasObj = true; |
| 3550 | 3700 | try { |
| 3551 | 3701 | // No IE, not a class called "name", it's a variable |
| — | — | @@ -3555,3 +3705,4 @@ |
| 3556 | 3706 | return hasObj; |
| 3557 | 3707 | } |
| 3558 | 3708 | }; |
| | 3709 | + |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/skins/mvpcf/mw.style.PlayerSkinMvpcf.css |
| — | — | @@ -1,22 +1,9 @@ |
| 2 | | -/* |
| | 2 | +/** |
| 3 | 3 | * reference player skin |
| 4 | 4 | */ |
| 5 | 5 | |
| 6 | | -/*Video player*/ |
| 7 | | - |
| 8 | | -/* large play button: */ |
| 9 | | -.mv-player .play-btn-large { |
| 10 | | - width : 130px; |
| 11 | | - height : 96px; |
| 12 | | - background : url(images/player_big_play_button.png) !important; |
| 13 | | - position : absolute; |
| 14 | | - cursor : pointer; |
| 15 | | - border : none !important; |
| 16 | | - z-index : 1; |
| 17 | | -} |
| 18 | | -/*.ui-state-default */ |
| 19 | 6 | |
| 20 | | - |
| | 7 | +/*.ui-state-default */ |
| 21 | 8 | .mv-player a:link {color: #2060c1; text-decoration: underline;} |
| 22 | 9 | .mv-player a:visited {color: #2060c1; text-decoration: underline;} |
| 23 | 10 | /*a:visited {color: #75a5e4; text-decoration: underline;}*/ /*Not sure if you want this*/ |
| — | — | @@ -31,7 +18,8 @@ |
| 32 | 19 | height: 305px; |
| 33 | 20 | } |
| 34 | 21 | .mv-player .control-bar { |
| 35 | | - height: 29px; |
| | 22 | + height: 29px; |
| | 23 | + z-index: 2; |
| 36 | 24 | } |
| 37 | 25 | .mv-player .controlInnerSmall { |
| 38 | 26 | /* width: 430px;*/ |
| — | — | @@ -61,11 +49,6 @@ |
| 62 | 50 | position:relative; |
| 63 | 51 | } |
| 64 | 52 | |
| 65 | | -.controls a{ |
| 66 | | - display: block; |
| 67 | | - height: 100%; |
| 68 | | - width: 100%; |
| 69 | | -} |
| 70 | 53 | .mv-player .volume_icon { |
| 71 | 54 | float: right; |
| 72 | 55 | display: inline; |
| — | — | @@ -127,7 +110,7 @@ |
| 128 | 111 | width:10px; |
| 129 | 112 | height:15px; |
| 130 | 113 | margin-left:-5px; |
| 131 | | - margin-top: -1px; |
| | 114 | + margin-top: -0px; |
| 132 | 115 | z-index: 2; |
| 133 | 116 | } |
| 134 | 117 | |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/skins/kskin/mw.style.PlayerSkinKskin.css |
| — | — | @@ -188,7 +188,7 @@ |
| 189 | 189 | opacity: 0.9; |
| 190 | 190 | position: absolute; |
| 191 | 191 | top: 0; |
| 192 | | - z-index: 999; |
| | 192 | + z-index: 2; |
| 193 | 193 | } |
| 194 | 194 | |
| 195 | 195 | .k-player .k-menu-bar li a { |
| — | — | @@ -319,7 +319,7 @@ |
| 320 | 320 | height: 15px; |
| 321 | 321 | overflow: hidden; |
| 322 | 322 | padding-left: 2px; |
| 323 | | - width: 100%; |
| | 323 | + width: 95%; |
| 324 | 324 | } |
| 325 | 325 | |
| 326 | 326 | .menu-screen.menu-share button { |
| — | — | @@ -334,8 +334,11 @@ |
| 335 | 335 | } |
| 336 | 336 | |
| 337 | 337 | .k-player .menu-screen { |
| 338 | | - height: 100%; |
| | 338 | + height: 100%; |
| | 339 | + overflow-y: auto; |
| | 340 | + overflow-x: hide; |
| 339 | 341 | } |
| | 342 | + |
| 340 | 343 | |
| 341 | 344 | .k-player .menu-screen.menu-share div.ui-state-highlight { |
| 342 | 345 | background: none repeat scroll 0 0 transparent; |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/skins/kskin/mw.PlayerSkinKskin.js |
| — | — | @@ -2,10 +2,6 @@ |
| 3 | 3 | * Skin js allows you to override contrlBuilder html/class output |
| 4 | 4 | */ |
| 5 | 5 | |
| 6 | | -mw.addMessages( { |
| 7 | | - "mwe-embedplayer-credit-title" : "Title: $1" |
| 8 | | -} ); |
| 9 | | - |
| 10 | 6 | mw.PlayerSkinKskin = { |
| 11 | 7 | |
| 12 | 8 | // The parent class for all kskin css: |
| — | — | @@ -46,8 +42,8 @@ |
| 47 | 43 | 'volumeControl': { |
| 48 | 44 | 'w':40 |
| 49 | 45 | }, |
| 50 | | - // No kalturaAttribution component for kSkin ( its integrated into the credits screen ) |
| 51 | | - 'kalturaAttribution' : false, |
| | 46 | + // No attributionButton component for kSkin ( its integrated into the credits screen ) |
| | 47 | + 'attributionButton' : false, |
| 52 | 48 | |
| 53 | 49 | // Time display: |
| 54 | 50 | 'timeDisplay': { |
| — | — | @@ -88,6 +84,9 @@ |
| 89 | 85 | $menuBar = $j( '<ul />' ) |
| 90 | 86 | .addClass( 'k-menu-bar' ); |
| 91 | 87 | |
| | 88 | + // dont include about player menu item ( FIXME should be moved to a init function ) |
| | 89 | + delete ctrlObj.supportedMenuItems['aboutPlayerLibrary']; |
| | 90 | + |
| 92 | 91 | // Output menu item containers: |
| 93 | 92 | for ( var menuItem in ctrlObj.supportedMenuItems ) { |
| 94 | 93 | $menuBar.append( |
| — | — | @@ -115,7 +114,8 @@ |
| 116 | 115 | 'top' : '0px', |
| 117 | 116 | 'left' : '0px', |
| 118 | 117 | 'bottom' : '0px', |
| 119 | | - 'right' : '45px' |
| | 118 | + 'right' : '45px', |
| | 119 | + 'overflow' : 'hidden' |
| 120 | 120 | } ) |
| 121 | 121 | for ( var menuItem in ctrlObj.supportedMenuItems ) { |
| 122 | 122 | $menuScreens.append( |
| — | — | @@ -203,6 +203,9 @@ |
| 204 | 204 | .text ( gM( 'mwe-embedplayer-menu_btn' ) ); |
| 205 | 205 | } ); |
| 206 | 206 | this.$playerTarget.find( '.play-btn-large' ).fadeIn( 'fast' ); |
| | 207 | + |
| | 208 | + // re display the control bar if hidden: |
| | 209 | + this.showControlBar(); |
| 207 | 210 | |
| 208 | 211 | // Set close overlay menu flag: |
| 209 | 212 | this.displayOptionsMenuFlag = false; |
| — | — | @@ -221,6 +224,8 @@ |
| 222 | 225 | } ); |
| 223 | 226 | this.$playerTarget.find( '.play-btn-large' ).fadeOut( 'fast' ); |
| 224 | 227 | |
| | 228 | + $j(this.embedPlayer).trigger( 'displayMenuOverlay' ); |
| | 229 | + |
| 225 | 230 | // Set the Options Menu display flag to true: |
| 226 | 231 | this.displayOptionsMenuFlag = true; |
| 227 | 232 | }, |
| — | — | @@ -315,7 +320,7 @@ |
| 316 | 321 | ); |
| 317 | 322 | break; |
| 318 | 323 | case 'share': |
| 319 | | - embedPlayer.$interface.find( '.menu-share').html( |
| | 324 | + embedPlayer.$interface.find( '.menu-share' ).html( |
| 320 | 325 | this.getShare() |
| 321 | 326 | ); |
| 322 | 327 | break; |
| — | — | @@ -323,7 +328,7 @@ |
| 324 | 329 | }, |
| 325 | 330 | |
| 326 | 331 | /** |
| 327 | | - * Show the credit screen (presently specific to kaltura skin ) |
| | 332 | + * Show the credit screen ( presently specific to kaltura skin ) |
| 328 | 333 | */ |
| 329 | 334 | showCredits: function() { |
| 330 | 335 | // Set up the shortcuts: |
| — | — | @@ -339,7 +344,7 @@ |
| 340 | 345 | .loadingSpinner() |
| 341 | 346 | ); |
| 342 | 347 | |
| 343 | | - if( mw.getConfig( 'kalturaAttribution' ) == true ){ |
| | 348 | + if( mw.getConfig( 'EmbedPlayer.KalturaAttribution' ) == true ){ |
| 344 | 349 | $target.append( |
| 345 | 350 | $j( '<div />' ) |
| 346 | 351 | .addClass( 'k-attribution' ) |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/skins/mw.PlayerControlBuilder.js |
| — | — | @@ -2,6 +2,7 @@ |
| 3 | 3 | * Msg text is inherited from embedPlayer |
| 4 | 4 | */ |
| 5 | 5 | |
| | 6 | +( function( mw ) { |
| 6 | 7 | /** |
| 7 | 8 | * mw.PlayerControlBuilder object |
| 8 | 9 | * @param the embedPlayer element we are targeting |
| — | — | @@ -43,7 +44,10 @@ |
| 44 | 45 | 'download' : true, |
| 45 | 46 | |
| 46 | 47 | // Share the video menu |
| 47 | | - 'share' : true |
| | 48 | + 'share' : true, |
| | 49 | + |
| | 50 | + // Player library link |
| | 51 | + 'aboutPlayerLibrary': true |
| 48 | 52 | }, |
| 49 | 53 | |
| 50 | 54 | // Flag to store the current fullscreen mode |
| — | — | @@ -65,7 +69,7 @@ |
| 66 | 70 | this.embedPlayer = embedPlayer; |
| 67 | 71 | |
| 68 | 72 | // Check for skin overrides for controlBuilder |
| 69 | | - var skinClass = embedPlayer.skinName[0].toUpperCase() + embedPlayer.skinName.substr( 1 ); |
| | 73 | + var skinClass = embedPlayer.skinName.substr(0,1).toUpperCase() + embedPlayer.skinName.substr( 1 ); |
| 70 | 74 | if ( mw['PlayerSkin' + skinClass ]) { |
| 71 | 75 | |
| 72 | 76 | // Clone as to not override prototype with the skin config |
| — | — | @@ -161,13 +165,13 @@ |
| 162 | 166 | if( embedPlayer.isTimedTextSupported() ){ |
| 163 | 167 | this.supportedComponets['timedText'] = true; |
| 164 | 168 | } |
| 165 | | - // Check for kalturaAttribution |
| 166 | | - if( mw.getConfig( 'kalturaAttribution' ) ){ |
| 167 | | - this.supportedComponets[ 'kalturaAttribution' ] = true; |
| | 169 | + // Check for Attribution button |
| | 170 | + if( mw.getConfig( 'EmbedPlayer.AttributionButton' ) && embedPlayer.attributionbutton ){ |
| | 171 | + this.supportedComponets[ 'attributionButton' ] = true; |
| 168 | 172 | } |
| 169 | 173 | |
| 170 | 174 | // Check global fullscreen enabled flag |
| 171 | | - if( mw.getConfig( 'enableFullscreen' ) === false ){ |
| | 175 | + if( mw.getConfig( 'EmbedPlayer.EnableFullscreen' ) === false ){ |
| 172 | 176 | this.supportedComponets[ 'fullscreen'] = false; |
| 173 | 177 | } |
| 174 | 178 | |
| — | — | @@ -246,11 +250,11 @@ |
| 247 | 251 | /** |
| 248 | 252 | * Get the fullscreen text css |
| 249 | 253 | */ |
| 250 | | - getFullscreenTextCss: function() { |
| 251 | | - // Some arbitrary scale relative to window size |
| 252 | | - var textSize = ( $j( window ).width() / 8 ) + 20; |
| | 254 | + getInterfaceSizeTextCss: function() { |
| | 255 | + // Some arbitrary scale relative to window size ( 400px wide is text size 105% ) |
| | 256 | + var textSize = this.embedPlayer.$interface.width() / 3.8; |
| 253 | 257 | if( textSize < 95 ) textSize = 95; |
| 254 | | - if( textSize > 250 ) textSize = 250; |
| | 258 | + if( textSize > 200 ) textSize = 200; |
| 255 | 259 | //mw.log(' win size is: ' + $j( window ).width() + ' ts: ' + textSize ); |
| 256 | 260 | return { |
| 257 | 261 | 'font-size' : textSize + '%' |
| — | — | @@ -306,7 +310,7 @@ |
| 307 | 311 | $j( '<div />' ) |
| 308 | 312 | .addClass( 'mw-fullscreen-overlay' ) |
| 309 | 313 | // Set some arbitrary high z-index |
| 310 | | - .css('z-index', mw.getConfig( 'fullScreenIndex' ) ) |
| | 314 | + .css('z-index', mw.getConfig( 'EmbedPlayer.fullScreenZIndex' ) ) |
| 311 | 315 | .hide() |
| 312 | 316 | .fadeIn("slow") |
| 313 | 317 | ); |
| — | — | @@ -323,7 +327,7 @@ |
| 324 | 328 | // Change the z-index of the interface |
| 325 | 329 | $interface.css( { |
| 326 | 330 | 'position' : 'fixed', |
| 327 | | - 'z-index' : mw.getConfig( 'fullScreenIndex' ) + 1, |
| | 331 | + 'z-index' : mw.getConfig( 'EmbedPlayer.fullScreenZIndex' ) + 1, |
| 328 | 332 | 'top' : this.windowOffset.top, |
| 329 | 333 | 'left' : this.windowOffset.left |
| 330 | 334 | } ); |
| — | — | @@ -361,7 +365,10 @@ |
| 362 | 366 | mw.log(' should update position: ' + $j( this ).css( 'position' ) ); |
| 363 | 367 | } |
| 364 | 368 | } ); |
| 365 | | - } ) |
| | 369 | + |
| | 370 | + // Resize the timed text font size per new player width |
| | 371 | + $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss() ); |
| | 372 | + } ); |
| 366 | 373 | |
| 367 | 374 | // Set the player height width: |
| 368 | 375 | $j( embedPlayer ).css( { |
| — | — | @@ -369,10 +376,8 @@ |
| 370 | 377 | } ) |
| 371 | 378 | // Animate a zoom ( while keeping aspect ) |
| 372 | 379 | .animate( _this.getFullscreenPlayerCss() ); |
| | 380 | + |
| 373 | 381 | |
| 374 | | - // Resize the timed text font size per window width |
| 375 | | - $interface.find( '.track' ).css( _this.getFullscreenTextCss() ); |
| 376 | | - |
| 377 | 382 | // Reposition play-btn-large ( this is unfortunately not easy to position with 'margin': 'auto' |
| 378 | 383 | $interface.find('.play-btn-large').animate( _this.getFullscreenPlayButtonCss() ) |
| 379 | 384 | |
| — | — | @@ -417,7 +422,7 @@ |
| 418 | 423 | $interface.find('.play-btn-large').css( _this.getFullscreenPlayButtonCss() ); |
| 419 | 424 | |
| 420 | 425 | // Update the timed text size |
| 421 | | - $interface.find( '.track' ).css( _this.getFullscreenTextCss() ); |
| | 426 | + $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss() ); |
| 422 | 427 | } |
| 423 | 428 | }); |
| 424 | 429 | |
| — | — | @@ -478,6 +483,9 @@ |
| 479 | 484 | // Restore the body scroll bar |
| 480 | 485 | $j('body').css( 'overflow', 'auto' ); |
| 481 | 486 | |
| | 487 | + // Resize the timed text font size per window width |
| | 488 | + $interface.find( '.track' ).css( _this.getInterfaceSizeTextCss() ); |
| | 489 | + |
| 482 | 490 | } ); |
| 483 | 491 | mw.log( 'restore embedPlayer:: ' + embedPlayer.getWidth() + ' h: ' + embedPlayer.getHeight()); |
| 484 | 492 | // Restore the player: |
| — | — | @@ -492,11 +500,7 @@ |
| 493 | 501 | 'left' : ( ( embedPlayer.getPlayerWidth() - this.getComponentWidth( 'playButtonLarge' ) ) / 2 ), |
| 494 | 502 | 'top' : ( ( embedPlayer.getPlayerHeight() -this.getComponentHeight( 'playButtonLarge' ) ) / 2 ) |
| 495 | 503 | } ); |
| 496 | | - |
| 497 | | - // Restore text size: |
| 498 | | - $interface.find( '.track' ).css({ |
| 499 | | - 'font-size' : '100%' |
| 500 | | - }) |
| | 504 | + |
| 501 | 505 | }, |
| 502 | 506 | |
| 503 | 507 | /** |
| — | — | @@ -553,7 +557,7 @@ |
| 554 | 558 | // Add recommend firefox if we have non-native playback: |
| 555 | 559 | if ( _this.checkNativeWarning( ) ) { |
| 556 | 560 | _this.doWarningBindinng( |
| 557 | | - 'showNativePlayerWarning', |
| | 561 | + 'EmbedPlayer.ShowNativeWarning', |
| 558 | 562 | gM( 'mwe-embedplayer-for_best_experience' ) |
| 559 | 563 | ); |
| 560 | 564 | } |
| — | — | @@ -601,7 +605,7 @@ |
| 602 | 606 | .animate( { |
| 603 | 607 | 'bottom' : 10 |
| 604 | 608 | }, 'slow' ); |
| 605 | | - |
| | 609 | + |
| 606 | 610 | }, |
| 607 | 611 | |
| 608 | 612 | /** |
| — | — | @@ -609,7 +613,11 @@ |
| 610 | 614 | */ |
| 611 | 615 | showControlBar: function(){ |
| 612 | 616 | var animateDuration = 'slow'; |
| 613 | | - $j( this.embedPlayer.getPlayerElement() ).css('z-index', '1') |
| | 617 | + if(! this.embedPlayer ) |
| | 618 | + return ; |
| | 619 | + if( this.embedPlayer.getPlayerElement ){ |
| | 620 | + $j( this.embedPlayer.getPlayerElement() ).css( 'z-index', '1' ); |
| | 621 | + } |
| 614 | 622 | mw.log( 'showControlBar' ); |
| 615 | 623 | // Move up text track if present |
| 616 | 624 | this.embedPlayer.$interface.find( '.track' ) |
| — | — | @@ -621,7 +629,7 @@ |
| 622 | 630 | ); |
| 623 | 631 | |
| 624 | 632 | // Show interface controls |
| 625 | | - this.embedPlayer.$interface.find( '.control-bar') |
| | 633 | + this.embedPlayer.$interface.find( '.control-bar' ) |
| 626 | 634 | .fadeIn( animateDuration ); |
| 627 | 635 | }, |
| 628 | 636 | |
| — | — | @@ -634,20 +642,25 @@ |
| 635 | 643 | if( ! this.embedPlayer.supports['overlays'] ){ |
| 636 | 644 | return false; |
| 637 | 645 | } |
| 638 | | - // If the config is false |
| 639 | | - if( mw.getConfig( 'overlayControls' ) === false){ |
| | 646 | + |
| | 647 | + // If disabled via the player |
| | 648 | + if( this.embedPlayer.overlaycontrols === false ){ |
| 640 | 649 | return false; |
| 641 | 650 | } |
| 642 | 651 | |
| 643 | | - // If disabled via the player |
| 644 | | - if( this.embedPlayer.overlayControls === false ){ |
| | 652 | + // If the config is false |
| | 653 | + if( mw.getConfig( 'EmbedPlayer.OverlayControls' ) == false){ |
| 645 | 654 | return false; |
| 646 | 655 | } |
| | 656 | + |
| 647 | 657 | // don't hide controls when content "height" is 0 ( audio tags ) |
| 648 | 658 | if( this.embedPlayer.getPlayerHeight() == 0 ){ |
| 649 | 659 | return false; |
| 650 | 660 | } |
| 651 | | - // Past alll tests OverlayControls is true: |
| | 661 | + if( this.embedPlayer.controls === false ){ |
| | 662 | + return false; |
| | 663 | + } |
| | 664 | + // Past all tests OverlayControls is true: |
| 652 | 665 | return true; |
| 653 | 666 | }, |
| 654 | 667 | |
| — | — | @@ -657,21 +670,29 @@ |
| 658 | 671 | * dependent on mediaElement being setup |
| 659 | 672 | */ |
| 660 | 673 | checkNativeWarning: function( ) { |
| 661 | | - |
| | 674 | + if( mw.getConfig( 'EmbedPlayer.ShowNativeWarning' ) === false ){ |
| | 675 | + return false; |
| | 676 | + } |
| | 677 | + |
| 662 | 678 | // If the resolution is too small don't display the warning |
| 663 | 679 | if( this.embedPlayer.getPlayerHeight() < 199 ){ |
| 664 | 680 | return false; |
| 665 | | - } |
| 666 | | - |
| | 681 | + } |
| 667 | 682 | // See if we have we have ogg support |
| 668 | 683 | var supportingPlayers = mw.EmbedTypes.players.getMIMETypePlayers( 'video/ogg' ); |
| 669 | 684 | for ( var i = 0; i < supportingPlayers.length; i++ ) { |
| 670 | | - if ( supportingPlayers[i].id == 'oggNative' ) { |
| | 685 | + |
| | 686 | + if ( supportingPlayers[i].id == 'oggNative' |
| | 687 | + && |
| | 688 | + // xxx google chrome has broken oggNative playback: |
| | 689 | + // http://code.google.com/p/chromium/issues/detail?id=56180 |
| | 690 | + ! /chrome/.test(navigator.userAgent.toLowerCase() ) |
| | 691 | + ){ |
| 671 | 692 | return false; |
| 672 | 693 | } |
| 673 | 694 | } |
| 674 | 695 | |
| 675 | | - // Check for h264 and or flash/flv source and playback support and dont' show wanring |
| | 696 | + // Check for h264 and or flash/flv source and playback support and don't show warning |
| 676 | 697 | if( |
| 677 | 698 | ( mw.EmbedTypes.players.getMIMETypePlayers( 'video/h264' ).length |
| 678 | 699 | && this.embedPlayer.mediaElement.getSources( 'video/h264' ).length ) |
| — | — | @@ -701,9 +722,12 @@ |
| 702 | 723 | |
| 703 | 724 | $j( embedPlayer ).hoverIntent({ |
| 704 | 725 | 'timeout': 2000, |
| 705 | | - 'over': function() { |
| 706 | | - if ( $j( '#warningOverlay_' + embedPlayer.id ).length == 0 ) { |
| 707 | | - var toppos = ( embedPlayer.instanceOf == 'mvPlayList' ) ? 25 : 10; |
| | 726 | + 'over': function() { |
| | 727 | + // don't do the overlay if already playing |
| | 728 | + if( embedPlayer.isPlaying() ){ |
| | 729 | + return ; |
| | 730 | + } |
| | 731 | + if ( $j( '#warningOverlay_' + embedPlayer.id ).length == 0 ) { |
| 708 | 732 | |
| 709 | 733 | $j( this ).append( |
| 710 | 734 | $j('<div />') |
| — | — | @@ -716,7 +740,7 @@ |
| 717 | 741 | 'display' : 'none', |
| 718 | 742 | 'background' : '#FFF', |
| 719 | 743 | 'color' : '#111', |
| 720 | | - 'top' : toppos + 'px', |
| | 744 | + 'top' : '10px', |
| 721 | 745 | 'left' : '10px', |
| 722 | 746 | 'right' : '10px', |
| 723 | 747 | 'padding' : '4px' |
| — | — | @@ -805,7 +829,7 @@ |
| 806 | 830 | ); |
| 807 | 831 | } |
| 808 | 832 | |
| 809 | | - // Setup play-head slider: |
| | 833 | + // Setup volume slider: |
| 810 | 834 | var sliderConf = { |
| 811 | 835 | range: "min", |
| 812 | 836 | value: 80, |
| — | — | @@ -865,7 +889,7 @@ |
| 866 | 890 | * The ctrl builder updates the interface on seeking |
| 867 | 891 | */ |
| 868 | 892 | onSeek: function(){ |
| 869 | | - mw.log( "controlBuilder:: onSeek" ); |
| | 893 | + //mw.log( "controlBuilder:: onSeek" ); |
| 870 | 894 | // Update the interface: |
| 871 | 895 | this.setStatus( gM( 'mwe-embedplayer-seeking' ) ); |
| 872 | 896 | }, |
| — | — | @@ -892,7 +916,7 @@ |
| 893 | 917 | gM( 'mwe-embedplayer-choose_player' ), |
| 894 | 918 | 'gear', |
| 895 | 919 | function( ) { |
| 896 | | - ctrlObj.displayOverlay( |
| | 920 | + ctrlObj.displayMenuOverlay( |
| 897 | 921 | ctrlObj.getPlayerSelect() |
| 898 | 922 | ); |
| 899 | 923 | } |
| — | — | @@ -905,7 +929,7 @@ |
| 906 | 930 | gM( 'mwe-embedplayer-download' ), |
| 907 | 931 | 'disk', |
| 908 | 932 | function( ) { |
| 909 | | - ctrlObj.displayOverlay( gM('mwe-embedplayer-loading_txt' ) ); |
| | 933 | + ctrlObj.displayMenuOverlay( gM('mwe-embedplayer-loading_txt' ) ); |
| 910 | 934 | // Call show download with the target to be populated |
| 911 | 935 | ctrlObj.showDownload( |
| 912 | 936 | ctrlObj.embedPlayer.$interface.find( '.overlay-content' ) |
| — | — | @@ -921,12 +945,25 @@ |
| 922 | 946 | gM( 'mwe-embedplayer-share' ), |
| 923 | 947 | 'mail-closed', |
| 924 | 948 | function( ) { |
| 925 | | - ctrlObj.displayOverlay( |
| | 949 | + ctrlObj.displayMenuOverlay( |
| 926 | 950 | ctrlObj.getShare() |
| 927 | 951 | ); |
| 928 | 952 | $j( ctrlObj.embedPlayer ).trigger( 'showShareEvent' ); |
| 929 | 953 | } |
| 930 | 954 | ) |
| | 955 | + }, |
| | 956 | + |
| | 957 | + 'aboutPlayerLibrary' : function( ctrlObj ){ |
| | 958 | + return $j.getLineItem( |
| | 959 | + gM( 'mwe-embedplayer-about-library' ), |
| | 960 | + 'info', |
| | 961 | + function( ) { |
| | 962 | + ctrlObj.displayMenuOverlay( |
| | 963 | + ctrlObj.aboutPlayerLibrary() |
| | 964 | + ); |
| | 965 | + $j( ctrlObj.embedPlayer ).trigger( 'aboutPlayerLibrary' ); |
| | 966 | + } |
| | 967 | + ) |
| 931 | 968 | } |
| 932 | 969 | }, |
| 933 | 970 | |
| — | — | @@ -936,8 +973,8 @@ |
| 937 | 974 | closeMenuOverlay: function(){ |
| 938 | 975 | var _this = this; |
| 939 | 976 | var embedPlayer = this.embedPlayer; |
| 940 | | - var $overlay = embedPlayer.$interface.find( '.overlay-win,.ui-widget-overlay,.ui-widget-shadow' ); |
| 941 | | - |
| | 977 | + var $overlay = embedPlayer.$interface.find( '.overlay-win,.ui-widget-overlay,.ui-widget-shadow' ); |
| | 978 | + |
| 942 | 979 | this.displayOptionsMenuFlag = false; |
| 943 | 980 | mw.log(' closeMenuOverlay: ' + this.displayOptionsMenuFlag); |
| 944 | 981 | |
| — | — | @@ -946,6 +983,10 @@ |
| 947 | 984 | } ); |
| 948 | 985 | // Show the big play button: |
| 949 | 986 | embedPlayer.$interface.find( '.play-btn-large' ).fadeIn( 'slow' ); |
| | 987 | + |
| | 988 | + |
| | 989 | + $j(embedPlayer).trigger( 'closeMenuOverlay' ); |
| | 990 | + |
| 950 | 991 | return false; // onclick action return false |
| 951 | 992 | }, |
| 952 | 993 | |
| — | — | @@ -955,10 +996,10 @@ |
| 956 | 997 | * |
| 957 | 998 | * @param {String} overlayContent content to be displayed |
| 958 | 999 | */ |
| 959 | | - displayOverlay: function( overlayContent ) { |
| | 1000 | + displayMenuOverlay: function( overlayContent ) { |
| 960 | 1001 | var _this = this; |
| 961 | 1002 | var embedPlayer = this.embedPlayer; |
| 962 | | - mw.log( 'displayOverlay::' ); |
| | 1003 | + mw.log( 'displayMenuOverlay::' ); |
| 963 | 1004 | // set the overlay display flag to true: |
| 964 | 1005 | this.displayOptionsMenuFlag = true; |
| 965 | 1006 | mw.log(" set displayOptionsMenuFlag:: " + this.displayOptionsMenuFlag); |
| — | — | @@ -966,6 +1007,8 @@ |
| 967 | 1008 | if ( !this.supportedComponets[ 'overlays' ] ) { |
| 968 | 1009 | embedPlayer.stop(); |
| 969 | 1010 | } |
| | 1011 | + |
| | 1012 | + |
| 970 | 1013 | // Hide the big play button: |
| 971 | 1014 | embedPlayer.$interface.find( '.play-btn-large' ).hide(); |
| 972 | 1015 | |
| — | — | @@ -1038,11 +1081,32 @@ |
| 1039 | 1082 | $overlayShadow |
| 1040 | 1083 | ) |
| 1041 | 1084 | .find( '.overlay-win' ) |
| 1042 | | - .fadeIn( "slow" ); |
| | 1085 | + .fadeIn( "slow" ); |
| 1043 | 1086 | |
| | 1087 | + // trigger menu overlay display |
| | 1088 | + $j(embedPlayer).trigger( 'displayMenuOverlay' ); |
| | 1089 | + |
| 1044 | 1090 | return false; // onclick action return false |
| 1045 | 1091 | }, |
| 1046 | | - |
| | 1092 | + aboutPlayerLibrary: function(){ |
| | 1093 | + return $j( '<div />' ) |
| | 1094 | + .append( |
| | 1095 | + $j( '<h3 />' ) |
| | 1096 | + .text( |
| | 1097 | + gM('mwe-embedplayer-about-library') |
| | 1098 | + ) |
| | 1099 | + , |
| | 1100 | + $j( '<span />') |
| | 1101 | + .append( |
| | 1102 | + gM('mwe-embedplayer-about-library-desc', |
| | 1103 | + $j('<a />').attr({ |
| | 1104 | + 'href' : MW_EMBED_LIBRARY_PAGE, |
| | 1105 | + 'target' : '_new' |
| | 1106 | + }) |
| | 1107 | + ) |
| | 1108 | + ) |
| | 1109 | + ) |
| | 1110 | + }, |
| 1047 | 1111 | /** |
| 1048 | 1112 | * Get the "share" interface |
| 1049 | 1113 | * |
| — | — | @@ -1118,7 +1182,9 @@ |
| 1119 | 1183 | * @param {Object} $target jQuery target for output |
| 1120 | 1184 | */ |
| 1121 | 1185 | getPlayerSelect: function( ) { |
| 1122 | | - mw.log('getPlayerSelect::'); |
| | 1186 | + mw.log('ControlBuilder::getPlayerSelect: source:' + |
| | 1187 | + this.embedPlayer.mediaElement.selectedSource.getSrc() + |
| | 1188 | + ' player: ' + this.embedPlayer.selectedPlayer.id ); |
| 1123 | 1189 | |
| 1124 | 1190 | var embedPlayer = this.embedPlayer; |
| 1125 | 1191 | |
| — | — | @@ -1132,22 +1198,22 @@ |
| 1133 | 1199 | |
| 1134 | 1200 | $j.each( embedPlayer.mediaElement.getPlayableSources(), function( sourceId, source ) { |
| 1135 | 1201 | |
| 1136 | | - var playable = mw.EmbedTypes.players.defaultPlayer( source.getMIMEType() ); |
| 1137 | | - var is_selected = ( source == embedPlayer.mediaElement.selectedSource ); |
| | 1202 | + var isPlayable = (typeof mw.EmbedTypes.players.defaultPlayer( source.getMIMEType() ) == 'object' ); |
| | 1203 | + var is_selected = ( source.getSrc() == embedPlayer.mediaElement.selectedSource.getSrc() ); |
| 1138 | 1204 | |
| 1139 | 1205 | $playerSelect.append( |
| 1140 | 1206 | $j( '<h2 />' ) |
| 1141 | 1207 | .text( source.getTitle() ) |
| 1142 | 1208 | ); |
| 1143 | 1209 | |
| 1144 | | - if ( playable ) { |
| | 1210 | + if ( isPlayable ) { |
| 1145 | 1211 | $playerList = $j('<ul />'); |
| 1146 | 1212 | // output the player select code: |
| 1147 | 1213 | |
| 1148 | 1214 | var supportingPlayers = mw.EmbedTypes.players.getMIMETypePlayers( source.getMIMEType() ); |
| 1149 | 1215 | |
| 1150 | | - for ( var i = 0; i < supportingPlayers.length ; i++ ) { |
| 1151 | | - |
| | 1216 | + for ( var i = 0; i < supportingPlayers.length ; i++ ) { |
| | 1217 | + |
| 1152 | 1218 | // Add link to select the player if not already selected ) |
| 1153 | 1219 | if( embedPlayer.selectedPlayer.id == supportingPlayers[i].id && is_selected ) { |
| 1154 | 1220 | // Active player ( no link ) |
| — | — | @@ -1169,8 +1235,8 @@ |
| 1170 | 1236 | .click( function() { |
| 1171 | 1237 | var iparts = $j( this ).attr( 'id' ).replace(/sc_/ , '' ).split( '_' ); |
| 1172 | 1238 | var sourceId = iparts[0]; |
| 1173 | | - var default_player_id = iparts[1]; |
| 1174 | | - mw.log( 'source id: ' + sourceId + ' player id: ' + default_player_id ); |
| | 1239 | + var player_id = iparts[1]; |
| | 1240 | + mw.log( 'source id: ' + sourceId + ' player id: ' + player_id ); |
| 1175 | 1241 | |
| 1176 | 1242 | embedPlayer.controlBuilder.closeMenuOverlay(); |
| 1177 | 1243 | |
| — | — | @@ -1180,10 +1246,11 @@ |
| 1181 | 1247 | } |
| 1182 | 1248 | |
| 1183 | 1249 | embedPlayer.mediaElement.selectSource( sourceId ); |
| 1184 | | - |
| | 1250 | + var playableSources = embedPlayer.mediaElement.getPlayableSources(); |
| | 1251 | + |
| 1185 | 1252 | mw.EmbedTypes.players.setPlayerPreference( |
| 1186 | | - default_player_id, |
| 1187 | | - embedPlayer.mediaElement.sources[ sourceId ].getMIMEType() |
| | 1253 | + player_id, |
| | 1254 | + playableSources[ sourceId ].getMIMEType() |
| 1188 | 1255 | ); |
| 1189 | 1256 | |
| 1190 | 1257 | // Issue a stop |
| — | — | @@ -1301,7 +1368,7 @@ |
| 1302 | 1369 | var $textList = $j( '<ul />' ); |
| 1303 | 1370 | $j.each( embedPlayer.mediaElement.getSources(), function( index, source ) { |
| 1304 | 1371 | if( source.getSrc() ) { |
| 1305 | | - mw.log("add src: " + source.getTitle() ); |
| | 1372 | + mw.log("showDownloadWithSources:: Add src: " + source.getTitle() ); |
| 1306 | 1373 | var $dl_line = $j( '<li />').append( |
| 1307 | 1374 | $j('<a />') |
| 1308 | 1375 | .attr( 'href', source.getSrc() ) |
| — | — | @@ -1420,15 +1487,31 @@ |
| 1421 | 1488 | }, |
| 1422 | 1489 | |
| 1423 | 1490 | /** |
| 1424 | | - * The kaltura attribution button |
| | 1491 | + * The Attribution button ( by default this is kaltura-icon |
| 1425 | 1492 | */ |
| 1426 | | - 'kalturaAttribution' : { |
| | 1493 | + 'attributionButton' : { |
| 1427 | 1494 | 'w' : 28, |
| 1428 | | - 'o' : function( ctrlObj ){ |
| | 1495 | + 'o' : function( ctrlObj ){ |
| | 1496 | + var buttonConfig = mw.getConfig( 'EmbedPlayer.AttributionButton'); |
| | 1497 | + |
| | 1498 | + var $icon = $j('<span />') |
| | 1499 | + .addClass( 'ui-icon' ); |
| | 1500 | + if( buttonConfig['class'] ){ |
| | 1501 | + $icon.addClass( buttonConfig['class'] ) |
| | 1502 | + } |
| | 1503 | + // Check for source ( by configuration convention this is a 16x16 image |
| | 1504 | + if( buttonConfig.iconurl ){ |
| | 1505 | + $icon.append( |
| | 1506 | + $j('<img />') |
| | 1507 | + .css({'width': '16px', 'height': '16px'}) |
| | 1508 | + .attr('src', buttonConfig.iconurl ) |
| | 1509 | + ) |
| | 1510 | + } |
| | 1511 | + |
| 1429 | 1512 | return $j('<a />') |
| 1430 | 1513 | .attr({ |
| 1431 | | - 'href': 'http://kaltura.com', |
| 1432 | | - 'title' : gM( 'mwe-embedplayer-kaltura-platform-title' ), |
| | 1514 | + 'href': buttonConfig.href, |
| | 1515 | + 'title' : buttonConfig.title, |
| 1433 | 1516 | 'target' : '_new' |
| 1434 | 1517 | }) |
| 1435 | 1518 | .append( |
| — | — | @@ -1439,10 +1522,9 @@ |
| 1440 | 1523 | 'left' : '2px' |
| 1441 | 1524 | }) |
| 1442 | 1525 | .append( |
| 1443 | | - $j('<span />') |
| 1444 | | - .addClass( 'ui-icon kaltura-icon' ) |
| | 1526 | + $icon |
| 1445 | 1527 | ) |
| 1446 | | - ) |
| | 1528 | + ) |
| 1447 | 1529 | } |
| 1448 | 1530 | }, |
| 1449 | 1531 | |
| — | — | @@ -1463,7 +1545,7 @@ |
| 1464 | 1546 | // Options binding: |
| 1465 | 1547 | .menu( { |
| 1466 | 1548 | 'content' : ctrlObj.getOptionsMenu(), |
| 1467 | | - 'zindex' : mw.getConfig( 'fullScreenIndex' ) + 1, |
| | 1549 | + 'zindex' : mw.getConfig( 'EmbedPlayer.fullScreenZIndex' ) + 1, |
| 1468 | 1550 | 'positionOpts': { |
| 1469 | 1551 | 'directionV' : 'up', |
| 1470 | 1552 | 'offsetY' : 30, |
| — | — | @@ -1596,11 +1678,10 @@ |
| 1597 | 1679 | 'w' : 100, |
| 1598 | 1680 | 'o' : function( ctrlObj ) { |
| 1599 | 1681 | return $j( '<div />' ) |
| 1600 | | - .addClass( "ui-widget time-disp" ) |
| 1601 | | - .append( |
| 1602 | | - ctrlObj.embedPlayer.getTimeRange() |
| 1603 | | - ) |
| 1604 | | - |
| | 1682 | + .addClass( "ui-widget time-disp" ) |
| | 1683 | + .append( |
| | 1684 | + ctrlObj.embedPlayer.getTimeRange() |
| | 1685 | + ) |
| 1605 | 1686 | } |
| 1606 | 1687 | }, |
| 1607 | 1688 | |
| — | — | @@ -1680,3 +1761,6 @@ |
| 1681 | 1762 | } |
| 1682 | 1763 | } |
| 1683 | 1764 | }; |
| | 1765 | + |
| | 1766 | + |
| | 1767 | +} )( window.mw ); |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/cortado/cortado-january.jar |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/cortado/cortado-ovt-stripped-0.5.0.jar |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/cortado/cortado-ovtk-stripped-0.6.0.jar |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/cortado/cortado-ovtk-stripped-0.6.0.jar |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1684 | 1768 | + application/octet-stream |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/kaltura-player/LightDoodleskin.swf |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/kaltura-player/LightDoodleskin.swf |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 1685 | 1769 | + application/octet-stream |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/binPlayers/kaltura-player/config.xml |
| — | — | @@ -1,4 +1,4 @@ |
| 2 | | -<layout id="full" name="player" skinPath="assets/skin.swf"> |
| | 2 | +<layout id="full" skinPath="assets/skin.swf"> |
| 3 | 3 | <HBox id="topLevel" width="100%" height="100%"> |
| 4 | 4 | <VBox id="player" width="100%" height="100%" styleName="black"> |
| 5 | 5 | <Canvas height="100%" width="100%" id="PlayerHolder" styleName="black"> |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/mw.EmbedPlayerJava.js |
| — | — | @@ -219,7 +219,11 @@ |
| 220 | 220 | this.getPlayerElement(); |
| 221 | 221 | this.parent_play(); |
| 222 | 222 | if ( this.playerElement ) { |
| 223 | | - this.playerElement.play(); |
| | 223 | + try{ |
| | 224 | + this.playerElement.play(); |
| | 225 | + }catch( e ){ |
| | 226 | + mw.log("EmbedPlayerJava::Could not issue play request"); |
| | 227 | + } |
| 224 | 228 | } |
| 225 | 229 | }, |
| 226 | 230 | |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/mw.EmbedPlayerHtml.js |
| — | — | @@ -2,7 +2,7 @@ |
| 3 | 3 | * Used to embed HTML as a movie clip |
| 4 | 4 | * for use with mv_playlist SMIL additions |
| 5 | 5 | * |
| 6 | | - * NOTE: will likely be depricated |
| | 6 | + * NOTE: will be deprecated |
| 7 | 7 | */ |
| 8 | 8 | var pcHtmlEmbedDefaults = { |
| 9 | 9 | // default duration of 4 seconds |
| — | — | @@ -22,7 +22,7 @@ |
| 23 | 23 | 'timeDisplay':true, |
| 24 | 24 | 'volumeControl':true, |
| 25 | 25 | |
| 26 | | - 'overlays':true, |
| | 26 | + 'overlays':true |
| 27 | 27 | }, |
| 28 | 28 | |
| 29 | 29 | // If the player is "ready to play" |
| — | — | @@ -92,8 +92,8 @@ |
| 93 | 93 | * @param {Float} perc Percentage to seek into the virtual player |
| 94 | 94 | * @param {Function} callback Function called once time has been updated |
| 95 | 95 | */ |
| 96 | | - setCurrentTime:function( perc, callback ) { |
| 97 | | - this.pauseTime = perc * this.getDuration(); |
| | 96 | + setCurrentTime:function( time, callback ) { |
| | 97 | + this.pauseTime = time; |
| 98 | 98 | if( callback ) |
| 99 | 99 | callback(); |
| 100 | 100 | }, |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/mw.EmbedPlayerVlc.js |
| — | — | @@ -38,7 +38,7 @@ |
| 39 | 39 | $j( this ).html( |
| 40 | 40 | '<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" ' + |
| 41 | 41 | 'codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab#Version=0,8,6,0" ' + |
| 42 | | - 'id="' + this.pid + '" events="True" height="' + this.getHeight() + '" width="' + this.getWidth() + '"' + |
| | 42 | + 'id="' + this.pid + '" events="True" height="' + this.getPlayerHeight() + '" width="' + this.getPlayerWidth() + '"' + |
| 43 | 43 | '>' + |
| 44 | 44 | '<param name="MRL" value="">' + |
| 45 | 45 | '<param name="ShowDisplay" value="True">' + |
| — | — | @@ -129,7 +129,7 @@ |
| 130 | 130 | if ( ( this.playerElement.input.state == 3 ) && ( this.playerElement.input.position != percent ) ) |
| 131 | 131 | { |
| 132 | 132 | this.playerElement.input.position = percent; |
| 133 | | - this.setStatus( 'seeking...' ); |
| | 133 | + this.controlBuilder.setStatus( 'seeking...' ); |
| 134 | 134 | } |
| 135 | 135 | } else { |
| 136 | 136 | this.doPlayThenSeek( percent ); |
| — | — | @@ -173,10 +173,10 @@ |
| 174 | 174 | this.getPlayerElement(); |
| 175 | 175 | if ( !this.playerElement ) |
| 176 | 176 | return ; |
| 177 | | - if ( this.playerElement.log ) { |
| 178 | | - // mw.log( 'state:' + this.playerElement.input.state); |
| 179 | | - // mw.log('time: ' + this.playerElement.input.time); |
| 180 | | - // mw.log('pos: ' + this.playerElement.input.position); |
| | 177 | + try{ |
| | 178 | + //mw.log( 'state:' + this.playerElement.input.state); |
| | 179 | + //mw.log('time: ' + this.playerElement.input.time); |
| | 180 | + //mw.log('pos: ' + this.playerElement.input.position); |
| 181 | 181 | if ( this.playerElement.log.messages.count > 0 ) { |
| 182 | 182 | // there is one or more messages in the log |
| 183 | 183 | var iter = this.playerElement.log.messages.iterator(); |
| — | — | @@ -191,6 +191,7 @@ |
| 192 | 192 | // clear the log once finished to avoid clogging |
| 193 | 193 | this.playerElement.log.messages.clear(); |
| 194 | 194 | } |
| | 195 | + |
| 195 | 196 | var newState = this.playerElement.input.state; |
| 196 | 197 | if ( this.prevState != newState ) { |
| 197 | 198 | if ( newState == 0 ) |
| — | — | @@ -222,6 +223,8 @@ |
| 223 | 224 | // current media is playing |
| 224 | 225 | this.onPlaying(); |
| 225 | 226 | } |
| | 227 | + } catch( e ){ |
| | 228 | + mw.log("EmbedPlayerVlc::Monitor error"); |
| 226 | 229 | } |
| 227 | 230 | // update the status and check timmer via universal parent monitor |
| 228 | 231 | this.parent_monitor(); |
| — | — | @@ -232,10 +235,10 @@ |
| 233 | 236 | * @@note: should be localized: |
| 234 | 237 | */ |
| 235 | 238 | onOpen: function() { |
| 236 | | - this.setStatus( "Opening..." ); |
| | 239 | + this.controlBuilder.setStatus( "Opening..." ); |
| 237 | 240 | }, |
| 238 | 241 | onBuffer: function() { |
| 239 | | - this.setStatus( "Buffering..." ); |
| | 242 | + this.controlBuilder.setStatus( "Buffering..." ); |
| 240 | 243 | }, |
| 241 | 244 | onPlay: function() { |
| 242 | 245 | this.onPlaying(); |
| — | — | @@ -299,8 +302,12 @@ |
| 300 | 303 | */ |
| 301 | 304 | pause : function() { |
| 302 | 305 | this.parent_pause(); // update the interface if paused via native control |
| 303 | | - if ( this.getPlayerElement() ) { |
| 304 | | - this.playerElement.playlist.togglePause(); |
| | 306 | + if ( this.getPlayerElement() ) { |
| | 307 | + try{ |
| | 308 | + this.playerElement.playlist.togglePause(); |
| | 309 | + } catch( e ){ |
| | 310 | + mw.log("EmbedPlayerVlc could not pause video " + e); |
| | 311 | + } |
| 305 | 312 | } |
| 306 | 313 | }, |
| 307 | 314 | |
| — | — | @@ -338,16 +345,20 @@ |
| 339 | 346 | */ |
| 340 | 347 | fullscreen : function() { |
| 341 | 348 | if ( this.playerElement ) { |
| 342 | | - if ( this.playerElement.video ) |
| 343 | | - this.playerElement.video.toggleFullscreen(); |
| 344 | | - } |
| 345 | | - this.parent_fullscreen(); |
| | 349 | + if ( this.playerElement.video ){ |
| | 350 | + try{ |
| | 351 | + this.playerElement.video.toggleFullscreen(); |
| | 352 | + } catch ( e ){ |
| | 353 | + mw.log("VlcEmbed toggle fullscreen : possible error: " + e); |
| | 354 | + } |
| | 355 | + } |
| | 356 | + } |
| 346 | 357 | }, |
| 347 | 358 | |
| 348 | 359 | /** |
| 349 | 360 | * Get the embed vlc object |
| 350 | 361 | */ |
| 351 | | - getPlayerElement : function() { |
| | 362 | + getPlayerElement : function() { |
| 352 | 363 | this.playerElement = $j( '#' + this.pid ).get(0); |
| 353 | 364 | return this.playerElement; |
| 354 | 365 | } |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/EmbedPlayer.i18n.php |
| — | — | @@ -3,7 +3,7 @@ |
| 4 | 4 | * Internationalisation for EmbedPlayer |
| 5 | 5 | * |
| 6 | 6 | * @file |
| 7 | | - * @ingroup Extensions |
| | 7 | + * @ingroup Extensions |
| 8 | 8 | */ |
| 9 | 9 | |
| 10 | 10 | $messages = array(); |
| — | — | @@ -34,6 +34,8 @@ |
| 35 | 35 | 'mwe-embedplayer-download' => 'Download', |
| 36 | 36 | 'mwe-embedplayer-share' => 'Share', |
| 37 | 37 | 'mwe-embedplayer-credits' => 'Credits', |
| | 38 | + 'mwe-embedplayer-about-library'=> 'About kaltura player', |
| | 39 | + 'mwe-embedplayer-about-library-desc' => 'Kaltura\'s HTML5 Media Library enables you to take advantage of the html5 <video> and <audio> tags today with a consistent player interface across all major browsers. <br> <br> [$1 More about the kaltura player library].', |
| 38 | 40 | 'mwe-embedplayer-clip_linkback' => 'Clip source page', |
| 39 | 41 | 'mwe-embedplayer-choose_player' => 'Choose video player', |
| 40 | 42 | 'mwe-embedplayer-no-player' => 'No player available for $1', |
| — | — | @@ -61,12 +63,13 @@ |
| 62 | 64 | 'mwe-embedplayer-embed_site_or_blog' => 'Embed on a page', |
| 63 | 65 | 'mwe-embedplayer-related_videos' => 'Related videos', |
| 64 | 66 | 'mwe-embedplayer-seeking' => 'seeking', |
| | 67 | + 'mwe-embedplayer-buffering' => 'buffering', |
| 65 | 68 | 'mwe-embedplayer-copy-code' => 'Copy code', |
| 66 | 69 | 'mwe-embedplayer-video-h264' => 'H.264 video', |
| 67 | 70 | 'mwe-embedplayer-video-flv' => 'Flash video', |
| 68 | 71 | 'mwe-embedplayer-video-ogg' => 'Ogg video', |
| 69 | 72 | 'mwe-embedplayer-video-audio' => 'Ogg audio', |
| 70 | | - 'mwe-embedplayer-missing-source' => 'No source video was found. Check that your embed code includes a source or API key', |
| | 73 | + 'mwe-embedplayer-missing-source' => 'No source video was found', |
| 71 | 74 | ); |
| 72 | 75 | |
| 73 | 76 | /** Message documentation (Message documentation) |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/mw.EmbedPlayerNative.js |
| — | — | @@ -40,13 +40,16 @@ |
| 41 | 41 | 'volumeControl' : true, |
| 42 | 42 | 'overlays' : true |
| 43 | 43 | }, |
| | 44 | + |
| | 45 | + insertAndPlayingConfig : false, |
| | 46 | + |
| 44 | 47 | /** |
| 45 | 48 | * updates the supported features given the "type of player" |
| 46 | 49 | */ |
| 47 | 50 | updateFeatureSupport: function(){ |
| 48 | 51 | // iWhatever devices appear to have a broken |
| 49 | 52 | // dom overlay implementation of video atm. (hopefully iphone OS 4 fixes this ) |
| 50 | | - if( mw.isMobileSafari() ) { |
| | 53 | + if( mw.isMobileHTML5() ) { |
| 51 | 54 | this.supports.overlays = false; |
| 52 | 55 | } |
| 53 | 56 | }, |
| — | — | @@ -57,10 +60,14 @@ |
| 58 | 61 | doEmbedHTML : function () { |
| 59 | 62 | var _this = this; |
| 60 | 63 | |
| | 64 | + // Reset some play state flags: |
| | 65 | + _this.bufferStartFlag = false; |
| | 66 | + _this.bufferEndFlag = false; |
| | 67 | + |
| 61 | 68 | mw.log( "native play url:" + this.getSrc() + ' startOffset: ' + this.start_ntp + ' end: ' + this.end_ntp ); |
| 62 | 69 | |
| 63 | | - // Check if using native contorls and already the "pid" is already in the DOM |
| 64 | | - if( this.useNativeControls && $j( '#' + this.pid ).length && |
| | 70 | + // Check if using native controls and already the "pid" is already in the DOM |
| | 71 | + if( this.useNativePlayerControls() && $j( '#' + this.pid ).length && |
| 65 | 72 | typeof $j( '#' + this.pid ).get(0).play != 'undefined' ) { |
| 66 | 73 | _this.postEmbedJS(); |
| 67 | 74 | return ; |
| — | — | @@ -78,7 +85,7 @@ |
| 79 | 86 | * Get the native player embed code. |
| 80 | 87 | * |
| 81 | 88 | * @param {object} playerAttribtues Attributes to be override in function call |
| 82 | | - * @return {object} jQuery player code object |
| | 89 | + * @return {object} cssSet css to apply to the player |
| 83 | 90 | */ |
| 84 | 91 | getNativePlayerHtml: function( playerAttribtues, cssSet ){ |
| 85 | 92 | if( !playerAttribtues) { |
| — | — | @@ -169,12 +176,12 @@ |
| 170 | 177 | // Bind events to local js methods: |
| 171 | 178 | vid.addEventListener( 'canplaythrogh', function() { $j( _this ).trigger('canplaythrough'); }, true); |
| 172 | 179 | vid.addEventListener( 'loadedmetadata', function() { _this.onloadedmetadata() }, true); |
| 173 | | - vid.addEventListener( 'progress', function( e ) { _this.onprogress( e ); }, true); |
| | 180 | + vid.addEventListener( 'progress', function( e ) { if( _this.onprogress ) { _this.onprogress( e ); } }, true); |
| 174 | 181 | vid.addEventListener( 'ended', function() { _this.onended() }, true); |
| 175 | 182 | vid.addEventListener( 'seeking', function() { _this.onSeeking() }, true); |
| 176 | 183 | vid.addEventListener( 'seeked', function() { _this.onSeeked() }, true); |
| 177 | 184 | |
| 178 | | - vid.addEventListener( 'pause', function() { _this.onPaused() }, true ); |
| | 185 | + vid.addEventListener( 'pause', function() { if( _this.onPaused ) { _this.onPaused() } }, true ); |
| 179 | 186 | vid.addEventListener( 'play', function(){ _this.onPlay() }, true ); |
| 180 | 187 | vid.addEventListener( 'volumechange', function(){ _this.onVolumeChange() } , true ); |
| 181 | 188 | }, |
| — | — | @@ -201,9 +208,8 @@ |
| 202 | 209 | mw.log( 'Native::doSeek p: ' + percentage + ' : ' + this.supportsURLTimeEncoding() + ' dur: ' + this.getDuration() + ' sts:' + this.seek_time_sec ); |
| 203 | 210 | this.seeking = true; |
| 204 | 211 | // Run the seeking hook |
| 205 | | - $j( this.embedPlayer ).trigger( 'onSeek' ); |
| | 212 | + $j( this.embedPlayer ).trigger( 'onSeek' ); |
| 206 | 213 | |
| 207 | | - |
| 208 | 214 | // Run the onSeeking interface update |
| 209 | 215 | this.controlBuilder.onSeek(); |
| 210 | 216 | |
| — | — | @@ -235,12 +241,81 @@ |
| 236 | 242 | mw.log( 'native::doNativeSeek::' + percentage ); |
| 237 | 243 | this.seeking = true; |
| 238 | 244 | this.seek_time_sec = 0; |
| 239 | | - this.doSeekedCallback( ( percentage * this.duration ) , function(){ |
| | 245 | + this.setCurrentTime( ( percentage * this.duration ) , function(){ |
| 240 | 246 | _this.seeking = false; |
| 241 | 247 | _this.monitor(); |
| 242 | | - }) |
| | 248 | + }) |
| | 249 | + }, |
| | 250 | + |
| | 251 | + insertAndPlaySource: function( src , options ){ |
| | 252 | + mw.log("NativeEmbed:: insertAndPlaySource: " + src + ' insertAndPlayingConfig:' + this.insertAndPlayingConfig); |
| | 253 | + if(!options) |
| | 254 | + options = {}; |
| 243 | 255 | |
| | 256 | + if( options.lockUI ){ |
| | 257 | + this.playerElement.controls = false; |
| | 258 | + } |
| | 259 | + |
| | 260 | + // Make sure to capture the original source |
| | 261 | + if(! this.insertAndPlayingConfig ){ |
| | 262 | + //alert( 'setup this.insertAndPlayingConfig '); |
| | 263 | + this.insertAndPlayingConfig = { |
| | 264 | + 'src' : this.getSrc(), |
| | 265 | + 'time' : this.currentTime, |
| | 266 | + 'callback' : options.callback, |
| | 267 | + 'restoreControls' : options.lockUI |
| | 268 | + } |
| | 269 | + } |
| | 270 | + // Try to directly playback the source |
| | 271 | + this.switchSrc( src ); |
| | 272 | + |
| 244 | 273 | }, |
| | 274 | + restoreSourcePlayback: function( ){ |
| | 275 | + var _this = this; |
| | 276 | + mw.log( "RestoreSourcePlayback:: empty out insertAndPlayingConfig" ); |
| | 277 | + if( !this.insertAndPlayingConfig) { |
| | 278 | + mw.log("Error: called restored playback with empty insertAndPlayingConfig") |
| | 279 | + return; |
| | 280 | + } |
| | 281 | + this.switchSrc( this.insertAndPlayingConfig.src ); |
| | 282 | + //this.playerElement.play(); |
| | 283 | + // Remove insert and playing config flag |
| | 284 | + this.insertAndPlayingConfig = false; |
| | 285 | + |
| | 286 | + var time = this.insertAndPlayingConfig.time; |
| | 287 | + var callback = this.insertAndPlayingConfig.callback; |
| | 288 | + |
| | 289 | + // run the seek: |
| | 290 | + this.setCurrentTime( time ,function(){ |
| | 291 | + if( this.insertAndPlayingConfig.restoreControls ){ |
| | 292 | + this.playerElement.controls = true; |
| | 293 | + } |
| | 294 | + }); |
| | 295 | + // Give some time for ipad to figure out whats going on: |
| | 296 | + setTimeout(function(){ |
| | 297 | + _this.playerElement.load(); |
| | 298 | + _this.playerElement.play(); |
| | 299 | + },100); |
| | 300 | + |
| | 301 | + //alert("insertAndPlayingConfig:: " + this.insertAndPlayingConfig); |
| | 302 | + // Run the callback |
| | 303 | + if( callback ){ |
| | 304 | + callback(); |
| | 305 | + } |
| | 306 | + }, |
| | 307 | + switchSrc: function( src ){ |
| | 308 | + mw.log( 'switchSrc' ) |
| | 309 | + if( this.getPlayerElement() ){ |
| | 310 | + try{ |
| | 311 | + //this.playerElement.pause(); |
| | 312 | + this.playerElement.src = src; |
| | 313 | + this.playerElement.load(); |
| | 314 | + this.playerElement.play(); |
| | 315 | + } catch( e ){ |
| | 316 | + mw.log("Error: possible error in swiching source playback"); |
| | 317 | + } |
| | 318 | + } |
| | 319 | + }, |
| 245 | 320 | |
| 246 | 321 | /** |
| 247 | 322 | * Seek in a existing stream |
| — | — | @@ -277,47 +352,46 @@ |
| 278 | 353 | * @param {Float} position Seconds to set the time to |
| 279 | 354 | * @param {Function} callback Function called once time has been set. |
| 280 | 355 | */ |
| 281 | | - setCurrentTime: function( position , callback ) { |
| 282 | | - var _this = this; |
| 283 | | - //mw.log( 'native:setCurrentTime::: ' + position + ' : dur: ' + _this.getDuration() ); |
| 284 | | - this.getPlayerElement(); |
| 285 | | - if ( !this.playerElement ) { |
| 286 | | - this.load( function() { |
| 287 | | - _this.doSeekedCallback( position, callback ); |
| 288 | | - } ); |
| 289 | | - } else { |
| 290 | | - _this.doSeekedCallback( position, callback ); |
| 291 | | - } |
| 292 | | - }, |
| 293 | | - |
| 294 | | - /** |
| 295 | | - * Do the seek request with a callback |
| 296 | | - * |
| 297 | | - * @param {Float} position Position in seconds |
| 298 | | - * @param {Function} callback Function to call once seeking completes |
| 299 | | - */ |
| 300 | | - doSeekedCallback : function( position, callback ) { |
| | 356 | + setCurrentTime: function( time , callback, callbackCount ) { |
| 301 | 357 | var _this = this; |
| | 358 | + if( !callbackCount ) |
| | 359 | + callbackCount = 0; |
| 302 | 360 | this.getPlayerElement(); |
| 303 | | - var once = function( event ) { |
| 304 | | - callback(); |
| 305 | | - _this.playerElement.removeEventListener( 'seeked', once, false ); |
| 306 | | - }; |
| 307 | | - // Assume we will get to add the Listener before the seek is done |
| 308 | | - _this.playerElement.currentTime = position; |
| 309 | | - _this.playerElement.addEventListener( 'seeked', once, false ); |
| | 361 | + if( _this.playerElement.readyState >= 1 ){ |
| | 362 | + if( _this.playerElement.currentTime == time ){ |
| | 363 | + callback(); |
| | 364 | + return; |
| | 365 | + } |
| | 366 | + var once = function( event ) { |
| | 367 | + if( callback ){ |
| | 368 | + callback(); |
| | 369 | + } |
| | 370 | + _this.playerElement.removeEventListener( 'seeked', once, false ); |
| | 371 | + }; |
| | 372 | + // Assume we will get to add the Listener before the seek is done |
| | 373 | + _this.playerElement.addEventListener( 'seeked', once, false ); |
| | 374 | + _this.playerElement.currentTime = time; |
| | 375 | + } else { |
| | 376 | + if( callbackCount >= 300 ){ |
| | 377 | + mw.log("Error with seek request, media never in ready state"); |
| | 378 | + return ; |
| | 379 | + } |
| | 380 | + setTimeout( function(){ |
| | 381 | + _this.setCurrentTime( time, callback , callbackCount++); |
| | 382 | + }, 10 ); |
| | 383 | + } |
| 310 | 384 | }, |
| 311 | | - |
| | 385 | + |
| 312 | 386 | /** |
| 313 | 387 | * Get the embed player time |
| 314 | 388 | */ |
| 315 | 389 | getPlayerElementTime: function() { |
| 316 | | - var _this = this; |
| | 390 | + var _this = this; |
| 317 | 391 | // Make sure we have .vid obj |
| 318 | 392 | this.getPlayerElement(); |
| 319 | 393 | |
| 320 | 394 | if ( !this.playerElement ) { |
| 321 | | - mw.log( 'could not find video embed: ' + this.id + ' stop monitor' ); |
| | 395 | + mw.log( 'Error: mwEmbedPlayer::getPlayerElementTime: missing ' + this.id + ' stop monitor' ); |
| 322 | 396 | return false; |
| 323 | 397 | } |
| 324 | 398 | // Return the playerElement currentTime |
| — | — | @@ -339,11 +413,13 @@ |
| 340 | 414 | * Pause the video playback |
| 341 | 415 | * calls parent_pause to update the interface |
| 342 | 416 | */ |
| 343 | | - pause: function() { |
| 344 | | - this.getPlayerElement(); |
| | 417 | + pause: function( ) { |
| | 418 | + this.getPlayerElement(); |
| 345 | 419 | this.parent_pause(); // update interface |
| 346 | | - if ( this.playerElement ) { |
| 347 | | - this.playerElement.pause(); |
| | 420 | + if ( this.playerElement ) { // update player |
| | 421 | + if( !this.playerElement.paused ){ |
| | 422 | + this.playerElement.pause(); |
| | 423 | + } |
| 348 | 424 | } |
| 349 | 425 | }, |
| 350 | 426 | |
| — | — | @@ -351,15 +427,28 @@ |
| 352 | 428 | * Play back the video stream |
| 353 | 429 | * calls parent_play to update the interface |
| 354 | 430 | */ |
| 355 | | - play: function() { |
| 356 | | - this.getPlayerElement(); |
| | 431 | + play: function( ) { |
| | 432 | + |
| | 433 | + this.getPlayerElement(); |
| 357 | 434 | this.parent_play(); // update interface |
| 358 | 435 | if ( this.playerElement && this.playerElement.play ) { |
| 359 | | - this.playerElement.play(); |
| | 436 | + // issue a play request if the media is paused: |
| | 437 | + if( this.playerElement.paused ){ |
| | 438 | + this.playerElement.play(); |
| | 439 | + } |
| 360 | 440 | // re-start the monitor: |
| 361 | 441 | this.monitor(); |
| 362 | 442 | } |
| 363 | 443 | }, |
| | 444 | + /** |
| | 445 | + * Stop the player ( end all listeners ) |
| | 446 | + */ |
| | 447 | + stop:function(){ |
| | 448 | + if( this.playerElement ){ |
| | 449 | + $j( this.playerElement ).unbind(); |
| | 450 | + } |
| | 451 | + this.parent_stop(); |
| | 452 | + }, |
| 364 | 453 | |
| 365 | 454 | /** |
| 366 | 455 | * Toggle the Mute |
| — | — | @@ -435,7 +524,7 @@ |
| 436 | 525 | // No vid loaded |
| 437 | 526 | mw.log( 'native::load() ... doEmbed' ); |
| 438 | 527 | this.onlyLoadFlag = true; |
| 439 | | - this.doEmbedPlayer(); |
| | 528 | + this.doEmbedHTML(); |
| 440 | 529 | this.onLoadedCallback = callback; |
| 441 | 530 | } else { |
| 442 | 531 | // Should not happen offten |
| — | — | @@ -448,7 +537,7 @@ |
| 449 | 538 | /** |
| 450 | 539 | * Get /update the playerElement value |
| 451 | 540 | */ |
| 452 | | - getPlayerElement: function () { |
| | 541 | + getPlayerElement: function () { |
| 453 | 542 | this.playerElement = $j( '#' + this.pid ).get( 0 ); |
| 454 | 543 | return this.playerElement; |
| 455 | 544 | }, |
| — | — | @@ -495,19 +584,17 @@ |
| 496 | 585 | * Handle the native paused event |
| 497 | 586 | */ |
| 498 | 587 | onPaused: function(){ |
| 499 | | - mw.log("native:paused:trigger"); |
| 500 | | - this.pause(); |
| 501 | | - $j( this ).trigger( 'pause' ); |
| | 588 | + mw.log( "EmbedPlayer:native: OnPaused" ); |
| | 589 | + this.parent_pause(); |
| 502 | 590 | }, |
| 503 | 591 | |
| 504 | 592 | /** |
| 505 | 593 | * Handle the native play event |
| 506 | 594 | */ |
| 507 | 595 | onPlay: function(){ |
| 508 | | - mw.log("native::play::trigger"); |
| 509 | | - if( !this.isPlaying () ){ |
| 510 | | - this.play(); |
| 511 | | - } |
| | 596 | + mw.log("EmbedPlayer:native:: OnPlay"); |
| | 597 | + // Update the interface |
| | 598 | + this.parent_play(); |
| 512 | 599 | }, |
| 513 | 600 | |
| 514 | 601 | /** |
| — | — | @@ -519,8 +606,8 @@ |
| 520 | 607 | */ |
| 521 | 608 | onloadedmetadata: function() { |
| 522 | 609 | this.getPlayerElement(); |
| 523 | | - mw.log( 'f:onloadedmetadata metadata ready Update duration:' + this.playerElement.duration + ' old dur: ' + this.getDuration() ); |
| 524 | | - if ( ! isNaN( this.playerElement.duration ) ) { |
| | 610 | + if ( this.playerElement && ! isNaN( this.playerElement.duration ) ) { |
| | 611 | + mw.log( 'f:onloadedmetadata metadata ready Update duration:' + this.playerElement.duration + ' old dur: ' + this.getDuration() ); |
| 525 | 612 | this.duration = this.playerElement.duration; |
| 526 | 613 | } |
| 527 | 614 | |
| — | — | @@ -556,12 +643,15 @@ |
| 557 | 644 | * Used to update the bufferedPercent |
| 558 | 645 | */ |
| 559 | 646 | onended: function() { |
| 560 | | - var _this = this; |
| 561 | | - //mw.log( 'native:onended:' + this.playerElement.currentTime + ' real dur:' + this.getDuration() ); |
| 562 | | - // run abstract player onEned if the abstract player still things we are playing |
| | 647 | + var _this = this; |
| | 648 | + mw.log( 'EmbedPlayer:native: onended:' + this.playerElement.currentTime + ' real dur:' + this.getDuration() + |
| | 649 | + ' insertAndPlayingConfig: ' + this.insertAndPlayingConfig); |
| 563 | 650 | |
| 564 | | - if( this.isPlaying() ){ |
| 565 | | - this.onClipDone(); |
| 566 | | - } |
| | 651 | + if( this.insertAndPlayingConfig ){ |
| | 652 | + this.restoreSourcePlayback(); |
| | 653 | + this.insertAndPlayingConfig = false; |
| | 654 | + return ; |
| | 655 | + } |
| | 656 | + this.onClipDone(); |
| 567 | 657 | } |
| 568 | 658 | }; |
| Index: trunk/extensions/TimedMediaHandler/EmbedPlayer/mw.EmbedPlayerKplayer.js |
| — | — | @@ -31,13 +31,20 @@ |
| 32 | 32 | * Write the Embed html to the target |
| 33 | 33 | */ |
| 34 | 34 | doEmbedHTML : function () { |
| 35 | | - var _this = this; |
| 36 | | - var playerPath = mw.getMwEmbedPath() + 'modules/EmbedPlayer/binPlayers/kaltura-player'; |
| | 35 | + var _this = this; |
| 37 | 36 | |
| 38 | 37 | mw.log("kPlayer:: embed src::" + _this.getSrc() ); |
| 39 | 38 | var flashvars = {}; |
| 40 | 39 | flashvars.autoPlay = "true"; |
| | 40 | + var playerPath = mw.getMwEmbedPath() + 'modules/EmbedPlayer/binPlayers/kaltura-player'; |
| 41 | 41 | flashvars.entryId = mw.absoluteUrl( _this.getSrc() ); |
| | 42 | + |
| | 43 | + // Use a relative url if the protocal is file:// |
| | 44 | + if( mw.parseUri( document.URL).protocol == 'file' ) { |
| | 45 | + playerPath = mw.getRelativeMwEmbedPath() + 'modules/EmbedPlayer/binPlayers/kaltura-player'; |
| | 46 | + flashvars.entryId = _this.getSrc(); |
| | 47 | + } |
| | 48 | + |
| 42 | 49 | flashvars.debugMode = "true"; |
| 43 | 50 | flashvars.fileSystemMode = "true"; |
| 44 | 51 | flashvars.widgetId = "_7463"; |
| — | — | @@ -49,10 +56,10 @@ |
| 50 | 57 | |
| 51 | 58 | //flashvars.host = "www.kaltura.com"; |
| 52 | 59 | flashvars.externalInterfaceDisabled = 'false'; |
| 53 | | - //flashvars.skinPath = playerPath + '/skin.swf'; |
| | 60 | + flashvars.skinPath = playerPath + '/skin.swf'; |
| 54 | 61 | |
| 55 | 62 | flashvars["full.skinPath"] = playerPath + '/LightDoodleskin.swf'; |
| 56 | | - |
| | 63 | + |
| 57 | 64 | var params = { }; |
| 58 | 65 | params.quality = "best"; |
| 59 | 66 | params.wmode = "opaque"; |
| — | — | @@ -207,9 +214,18 @@ |
| 208 | 215 | */ |
| 209 | 216 | doSeek: function( percentage ) { |
| 210 | 217 | var _this = this; |
| | 218 | + if ( this.supportsURLTimeEncoding() ){ |
| | 219 | + |
| | 220 | + // Make sure we could not do a local seek instead: |
| | 221 | + if ( !( percentage < this.bufferedPercent && this.playerElement.duration && !this.didSeekJump )) { |
| | 222 | + // We support URLTimeEncoding call parent seek: |
| | 223 | + this.parent_doSeek( percentage ); |
| | 224 | + return; |
| | 225 | + } |
| | 226 | + } |
| | 227 | + |
| 211 | 228 | if( this.playerElement ) { |
| 212 | | - var seekTime = percentage * this.getDuration(); |
| 213 | | - |
| | 229 | + var seekTime = percentage * this.getDuration(); |
| 214 | 230 | // Issue the seek to the flash player: |
| 215 | 231 | this.playerElement.sendNotification('doSeek', seekTime); |
| 216 | 232 | |