WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/18/2020 05:37:19 PM (6 years ago)
Author:
johnbillion
Message:

Media: Add an audio and video player to the media manager modal.

This introduces a means of playing existing audio and video files while browsing them prior to selecting them for use.

Props antpb, Mista-Flo, garrett-eclipse, mapk

Fixes #43640

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-includes/media-template.php

    r49064 r49195  
    367367
    368368                                <# if ( 'audio' === data.type ) { #>
    369                                 <div class="wp-media-wrapper">
     369                                <div class="wp-media-wrapper wp-audio">
    370370                                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
    371371                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
    … …  
    596596                </h2>
    597597                <div class="attachment-info">
    598                         <div class="thumbnail thumbnail-{{ data.type }}">
    599                                 <# if ( data.uploading ) { #>
    600                                         <div class="media-progress-bar"><div></div></div>
    601                                 <# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
    602                                         <img src="{{ data.size.url }}" draggable="false" alt="" />
    603                                 <# } else { #>
    604                                         <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
    605                                 <# } #>
    606                         </div>
     598
     599                        <# if ( 'audio' === data.type ) { #>
     600                                <div class="wp-media-wrapper wp-audio">
     601                                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
     602                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
     603                                        </audio>
     604                                </div>
     605                        <# } else if ( 'video' === data.type ) {
     606                                var w_rule = '';
     607                                if ( data.width ) {
     608                                        w_rule = 'width: ' + data.width + 'px;';
     609                                } else if ( wp.media.view.settings.contentWidth ) {
     610                                        w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
     611                                }
     612                        #>
     613                                <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
     614                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
     615                                                <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
     616                                                <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
     617                                                <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
     618                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
     619                                        </video>
     620                                </div>
     621                        <# } else { #>
     622                                <div class="thumbnail thumbnail-{{ data.type }}">
     623                                        <# if ( data.uploading ) { #>
     624                                                <div class="media-progress-bar"><div></div></div>
     625                                        <# } else if ( 'image' === data.type && data.size && data.size.url ) { #>
     626                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
     627                                        <# } else { #>
     628                                                <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
     629                                        <# } #>
     630                                </div>
     631                        <# } #>
     632
    607633                        <div class="details">
    608634                                <div class="filename">{{ data.filename }}</div>
Note: See TracChangeset for help on using the changeset viewer.