WordPress.org

Make WordPress Core

Changeset 27420


Ignore:
Timestamp:
03/05/2014 09:36:32 PM (6 years ago)
Author:
wonderboymusic
Message:

Add a timestamp to the urls passed to <audio> and <video> in the modal to ensure that cached view instances aren't referenced by MEjs. Pause the player when closing the controller's modal.

See #27016, #26779.

Location:
trunk/src/wp-includes
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-views.js

    r27415 r27420  
    62406240            setTimeout( function() { self.resetFocus(); }, 10 );
    62416241
    6242             new MediaElementPlayer( this.$('audio').get(0), settings );
     6242            new MediaElementPlayer( this.$('.wp-audio-shortcode').get(0), settings );
    62436243
    62446244            return this;
     
    62656265
    62666266        initialize: function() {
    6267             _.bindAll(this, 'player', 'played');
    6268 
    6269             this.removable = false;
     6267            _.bindAll(this, 'player');
     6268
    62706269            this.listenTo( this.controller, 'close', this.close );
    62716270
    6272             // used in AttachmentDisplay.prototype.updateLinkTo
    6273             this.options.attachment = this.model.attachment;
    62746271            media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
    62756272        },
     
    62886285
    62896286        close : function() {
    6290             if ( this.removable ) {
    6291                 this.mejs.pause();
    6292             }
     6287            this.mejs.pause();
    62936288            this.remove();
    6294             this.mejs = this.mejsInstance = null;
    6295         },
    6296 
    6297         played : function () {
    6298             this.removable = true;
    62996289        },
    63006290
    63016291        player : function (mejs) {
    63026292            this.mejs = mejs;
    6303             this.mejs.addEventListener( 'play', this.played );
    63046293        },
    63056294
     
    63166305            setTimeout( function() { self.resetFocus(); }, 10 );
    63176306
    6318             if ( ! this.mejsInstance ) {
    6319                 this.mejsInstance = new MediaElementPlayer( this.$('video').get(0), settings );
    6320             }
    6321 
     6307            new MediaElementPlayer( this.$('.wp-video-shortcode').get(0), settings );
    63226308            return this;
    63236309        },
  • trunk/src/wp-includes/media-template.php

    r27411 r27420  
    655655        <div class="media-embed">
    656656            <div class="embed-media-settings embed-audio-settings">
    657                 <# if ( data.model.src ) { #>
    658                     <audio class="wp-audio-shortcode" src="{{{ data.model.src }}}"
     657                <#
     658                    var src,
     659                        t = (new Date()).getTime();
     660
     661                    if ( data.model.src ) {
     662                        src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
     663                    #>
     664                    <audio controls class="wp-audio-shortcode" src="{{{ src }}}"
    659665                        preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
    660                         <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
    661                         <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     666                        <#
     667                        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
     668                            #>autoplay<#
     669                        }
     670
     671                        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
     672                            #>loop<#
     673                        } #>
    662674                    />
    663675                    <# rendered = true; #>
     
    672684                foreach ( $default_types as $type ): ?>
    673685                <# if ( data.model.<?php echo $type ?> ) { #>
    674                     <# if ( ! rendered ) { #>
    675                     <audio class="wp-audio-shortcode" src="{{{ data.model.<?php echo $type ?> }}}"
     686                    <# if ( ! rendered ) {
     687                        src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
     688                    #>
     689                    <audio controls class="wp-audio-shortcode" src="{{{ src }}}"
    676690                        preload="{{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}}"
    677                         <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
    678                         <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     691                        <#
     692                        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
     693                            #>autoplay<#
     694                        }
     695                        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
     696                            #>loop<#
     697                        } #>
    679698                    />
    680699                    <#
     
    724743                <div class="wp-video-holder">
    725744                <#
    726                 var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
    727                     h = ! data.model.height ? 320 : data.model.height;
     745                    var src,
     746                        t = (new Date()).getTime(),
     747                        w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
     748                        h = ! data.model.height ? 360 : data.model.height;
    728749
    729750                if ( w !== data.model.width ) {
     
    731752                }
    732753
    733                 if ( data.model.src ) { #>
    734                     <video class="wp-video-shortcode"
     754                if ( data.model.src ) {
     755                    src = data.model.src + (data.model.src.indexOf('?') > -1 ? '&' : '?' ) + t;
     756                #>
     757                    <video controls class="wp-video-shortcode"
    735758                        width="{{{ w }}}"
    736759                        height="{{{ h }}}"
    737                         src="{{{ data.model.src }}}"
    738                         <# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
     760                        src="{{{ src }}}"
     761                        <#
     762                        if ( ! _.isUndefined( data.model.poster ) ) {
     763                            #>poster="{{{ data.model.poster }}}"<#
     764                        } #>
    739765                        preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
    740                         <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
    741                         <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     766                        <#
     767                        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
     768                            #>autoplay<#
     769                        }
     770
     771                        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
     772                            #>loop<#
     773                        } #>
    742774                    />
    743775                    <# rendered = true; #>
     
    752784                foreach ( $default_types as $type ): ?>
    753785                <# if ( data.model.<?php echo $type ?> ) { #>
    754                     <# if ( ! rendered ) { #>
    755                     <video class="wp-video-shortcode"
     786                    <# if ( ! rendered ) {
     787                        src = data.model.<?php echo $type ?> + (data.model.<?php echo $type ?>.indexOf('?') > -1 ? '&' : '?' ) + t;
     788                    #>
     789                    <video controls class="wp-video-shortcode"
    756790                        width="{{{ w }}}"
    757791                        height="{{{ h }}}"
    758                         src="{{{ data.model.<?php echo $type ?> }}}"
    759                         <# if ( ! _.isUndefined( data.model.poster ) ) { #>poster="{{{ data.model.poster }}}"<# } #>
     792                        src="{{{ src }}}"
     793                        <#
     794                        if ( ! _.isUndefined( data.model.poster ) ) {
     795                            #>poster="{{{ data.model.poster }}}"<#
     796                        } #>
    760797                        preload="{{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}}"
    761                         <# if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) { #>autoplay<# } #>
    762                         <# if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) { #>loop<# } #>
     798                        <#
     799                        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
     800                            #>autoplay<#
     801                        }
     802
     803                        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
     804                            #>loop<#
     805                        } #>
    763806                    />
    764807                    <#
Note: See TracChangeset for help on using the changeset viewer.