WordPress.org

Make WordPress Core

Changeset 27452


Ignore:
Timestamp:
03/07/2014 08:31:57 AM (7 years ago)
Author:
wonderboymusic
Message:

Videos in the media modal:

  • Support rendering of chromeless YouTube when a video shortcode's src is a YouTube URL.
  • Don't instantiate an instance of MediaElementPlayer until after the view has been attached to the DOM and the view's ready event has fired.
  • Don't set poster for videos when its value is empty. Much like src in the img tag - when empty, it will assume and load the current window's URL.
  • When removing a player instance, don't call the pause method if the playback is not native.

See #27016.

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

Legend:

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

    r27450 r27452  
    63856385
    63866386            this.listenTo( this.controller, 'close', this.close );
     6387            this.on( 'ready', this.setPlayer );
    63876388
    63886389            media.view.Settings.AttachmentDisplay.prototype.initialize.apply( this, arguments );
     
    64126413
    64136414        setPlayer : function () {
    6414             this.player = false;
     6415            if ( ! this.player ) {
     6416                this.player = new MediaElementPlayer( this.media, this.settings );
     6417            }
     6418        },
     6419
     6420        /**
     6421         * @abstract
     6422         */
     6423        setMedia : function () {
     6424            return this;
    64156425        },
    64166426
     
    64506460        close : function() {
    64516461            if ( this.player ) {
    6452                 this.mejs.pause();
     6462                if ( _.isUndefined( this.mejs.pluginType ) ) {
     6463                    this.mejs.pause();
     6464                }
    64536465                this.remove();
     6466                this.player = false;
    64546467            }
    64556468        },
     
    64796492            setTimeout( function() { self.resetFocus(); }, 10 );
    64806493
    6481             this.setPlayer( settings );
    6482 
    6483             return this;
     6494            this.settings = settings;
     6495
     6496            return this.setMedia();
    64846497        },
    64856498
     
    65046517        template:  media.template('audio-details'),
    65056518
    6506         setPlayer: function( settings ) {
     6519        setMedia: function() {
    65076520            var audio = this.$('.wp-audio-shortcode').get(0);
    65086521
    6509             audio = this.prepareSrc( audio );
    6510 
    6511             this.player = new MediaElementPlayer( audio, settings );
     6522            this.media = this.prepareSrc( audio );
     6523
    65126524            return this;
    65136525        }
     
    65296541        template:  media.template('video-details'),
    65306542
    6531         setPlayer: function( settings ) {
    6532             var video = this.$('.wp-video-shortcode').get(0);
    6533 
    6534             video = this.prepareSrc( video );
    6535 
    6536             this.player = new MediaElementPlayer( video, settings );
     6543        setMedia: function() {
     6544            var video = this.$('.wp-video-shortcode');
     6545
     6546            if ( ! video.hasClass('youtube-video') ) {
     6547                video = this.prepareSrc( video.get(0) );
     6548            } else {
     6549                video = video.get(0);
     6550            }
     6551
     6552            this.media = video;
     6553
    65376554            return this;
    65386555        }
  • trunk/src/wp-includes/media-template.php

    r27445 r27452  
    740740                    h = ! data.model.height ? 360 : data.model.height;
    741741
    742                 if ( w !== data.model.width ) {
     742                if ( data.model.width && w !== data.model.width ) {
    743743                    h = Math.ceil( ( h * w ) / data.model.width );
    744744                }
    745745
    746                 if ( data.model.src ) { #>
     746                if ( data.model.src ) {
     747                    if ( data.model.src.match(/youtube|youtu\.be/) ) {
     748                #>
     749                    <video controls
     750                        class="wp-video-shortcode youtube-video"
     751                        width="{{{ w }}}"
     752                        height="{{{ h }}}"
     753                        <?php
     754                        $props = array( 'poster' => '', 'preload' => 'metadata' );
     755                        foreach ( $props as $key => $value ):
     756                            if ( empty( $value ) ) {
     757                            ?><#
     758                            if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     759                                #> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
     760                            } #>
     761                            <?php } else {
     762                                echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
     763                            }
     764                        endforeach;
     765                        ?><#
     766                        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     767                        ?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
     768                            #> <?php echo $attr ?><#
     769                        }
     770                        <?php endforeach ?>#>
     771                    >
     772                        <source type="video/youtube" src="{{{ data.model.src }}}" />
     773                    </video>
     774                <#
     775                    } else {
     776                #>
    747777                    <video controls
    748778                        class="wp-video-shortcode"
     
    753783                        $props = array( 'poster' => '', 'preload' => 'metadata' );
    754784                        foreach ( $props as $key => $value ):
    755                             echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"
    756                         <?php endforeach;
     785                            if ( empty( $value ) ) {
     786                            ?><#
     787                            if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
     788                                #> <?php echo $key ?>="{{{ data.model.<?php echo $key ?> }}}"<#
     789                            } #>
     790                            <?php } else {
     791                                echo $key ?>="{{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}}"<?php
     792                            }
     793                        endforeach;
    757794                        ?><#
    758795                        <?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
     
    762799                        <?php endforeach ?>#>
    763800                    />
    764                     <# rendered = true; #>
    765801                <label class="setting">
    766802                    <span>SRC</span>
    767803                    <input type="text" disabled="disabled" data-setting="src" value="{{{ data.model.src }}}" />
    768804                </label>
    769                 <# } #>
     805                <#  }
     806                    rendered = true;
     807                } #>
    770808                <?php
    771809                $default_types = wp_get_video_extensions();
Note: See TracChangeset for help on using the changeset viewer.