WordPress.org

Make WordPress Core

Changeset 28171


Ignore:
Timestamp:
04/20/2014 03:52:57 AM (6 years ago)
Author:
wonderboymusic
Message:

Add a compatibility layer in wp-playlist.js to avoid VM errors from MediaElement's plugin bridge in the TinyMCE views for playlists by suppressing playback for files whose mime-type is not supported in the user's browser natively.

This is similar to how audio and video shortcodes are handled: file types are whitelisted for native playback.

See #27892.

Location:
trunk/src/wp-includes/js
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/mce-view.js

    r28144 r28171  
    612612            });
    613613
    614             this.player = p._player;
     614            this.player = p.player;
    615615        },
    616616
  • trunk/src/wp-includes/js/mediaelement/wp-mediaelement.css

    r28023 r28171  
    202202    white-space: nowrap;
    203203}
     204
     205.wp-audio-playlist .me-cannotplay span {
     206    padding: 5px 15px;
     207}
  • trunk/src/wp-includes/js/mediaelement/wp-playlist.js

    r28158 r28171  
    88            this.index = 0;
    99            this.settings = {};
     10            this.compatMode = $( 'body' ).hasClass( 'wp-admin' ) && $( '#content_ifr' ).length;
    1011            this.data = options.metadata || $.parseJSON( this.$('script').html() );
    1112            this.playerNode = this.$( this.data.type );
     
    2728            }
    2829
    29             this.playerNode.attr( 'src', this.current.get( 'src' ) );
     30            if ( this.isCompatibleSrc() ) {
     31                this.playerNode.attr( 'src', this.current.get( 'src' ) );
     32            }
    3033
    3134            _.bindAll( this, 'bindPlayer', 'bindResetPlayer', 'setPlayer', 'ended', 'clickTrack' );
     
    3942
    4043        bindPlayer : function (mejs) {
    41             this.player = mejs;
    42             this.player.addEventListener( 'ended', this.ended );
     44            this.mejs = mejs;
     45            this.mejs.addEventListener( 'ended', this.ended );
    4346        },
    4447
    4548        bindResetPlayer : function (mejs) {
    4649            this.bindPlayer( mejs );
    47             this.playCurrentSrc();
    48         },
    49 
    50         setPlayer: function () {
    51             if ( this._player ) {
    52                 this._player.pause();
    53                 this._player.remove();
     50            if ( this.isCompatibleSrc() ) {
     51                this.playCurrentSrc();
     52            }
     53        },
     54
     55        isCompatibleSrc: function () {
     56            var testNode;
     57
     58            if ( this.compatMode ) {
     59                testNode = $( '<span><source type="' + this.current.get( 'type' ) + '" /></span>' );
     60
     61                if ( ! wp.media.mixin.isCompatible( testNode ) ) {
     62                    this.playerNode.removeAttr( 'src' );
     63                    this.playerNode.removeAttr( 'poster' );
     64                    return;
     65                }
     66            }
     67
     68            return true;
     69        },
     70
     71        setPlayer: function (force) {
     72            if ( this.player ) {
     73                this.player.pause();
     74                this.player.remove();
    5475                this.playerNode = this.$( this.data.type );
    55                 this.playerNode.attr( 'src', this.current.get( 'src' ) );
     76            }
     77
     78            if (force) {
     79                if ( this.isCompatibleSrc() ) {
     80                    this.playerNode.attr( 'src', this.current.get( 'src' ) );
     81                }
    5682                this.settings.success = this.bindResetPlayer;
    5783            }
     84
    5885            /**
    5986             * This is also our bridge to the outside world
    6087             */
    61             this._player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
     88            this.player = new MediaElementPlayer( this.playerNode.get(0), this.settings );
    6289        },
    6390
    6491        playCurrentSrc : function () {
    6592            this.renderCurrent();
    66             this.player.setSrc( this.playerNode.attr( 'src' ) );
    67             this.player.load();
    68             this.player.play();
     93            this.mejs.setSrc( this.playerNode.attr( 'src' ) );
     94            this.mejs.load();
     95            this.mejs.play();
    6996        },
    7097
     
    135162
    136163        loadCurrent : function () {
    137             var last = this.playerNode.attr( 'src' ).split('.').pop(),
     164            var last = this.playerNode.attr( 'src' ) && this.playerNode.attr( 'src' ).split('.').pop(),
    138165                current = this.current.get( 'src' ).split('.').pop();
    139166
    140             this.player.pause();
     167            this.mejs && this.mejs.pause();
    141168
    142169            if ( last !== current ) {
    143                 this.setPlayer();
    144             } else {
     170                this.setPlayer( true );
     171            } else if ( this.isCompatibleSrc() ) {
    145172                this.playerNode.attr( 'src', this.current.get( 'src' ) );
    146173                this.playCurrentSrc();
Note: See TracChangeset for help on using the changeset viewer.