Make WordPress Core

Changeset 27539


Ignore:
Timestamp:
03/14/2014 02:35:49 PM (10 years ago)
Author:
wonderboymusic
Message:

The canPlayType property for audio and video in JS is so bad that the official valid responses are "probably" and "maybe". There are many cases where we might want to know if an audio|video tag is gonna blow up in our face before even attempting to make a MediaElementPlayer instance out of it.

The best (and most cautious) way to tackle this is to whitelist types by browser. Imagine that one implemented MEjs in TinyMCE's rich editor mode, this would be very helpful.

Add isCompatible( $media ) to wp.media.mixin. Future features will use this.

See #27389.

File:
1 edited

Legend:

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

    r27538 r27539  
    306306                }
    307307            }
     308        },
     309
     310        isCompatible: function ( media ) {
     311            if ( ! media.find( 'source' ).length ) {
     312                return false;
     313            }
     314
     315            var ua = window.navigator.userAgent.toLowerCase(),
     316                ff, chrome, opera, safari,
     317                isIE = ua.match(/MSIE/gi) !== null,
     318                isOpera = window.navigator.userAgent.match(/OPR/) !== null,
     319                isOldIE = ua.match(/MSIE [6-8]/gi) !== null,
     320                isChrome = ua.match(/safari/gi) && ua.match(/chrome/gi) !== null,
     321                isFirefox = ua.match(/firefox/gi) !== null,
     322                isSafari = ua.match(/safari/gi) !== null && ua.match(/chrome/gi) === null;
     323
     324            if ( isOldIE || isIE ) {
     325                return false;
     326            }
     327
     328            if ( isOpera ) {
     329                opera = false;
     330                media.find( 'source' ).each(function (i, elem) {
     331                    if ( elem.type.match(/video\/(ogv|webm)/gi) !== null ||
     332                        ( elem.type.match(/audio\/(ogg|wav)/gi) !== null ) ) {
     333                        opera = true;
     334                    }
     335                });
     336
     337                return opera;
     338            } else if ( isChrome ) {
     339                chrome = false;
     340                media.find( 'source' ).each(function (i, elem) {
     341                    if ( elem.type.match(/video\/(mp4|m4v|mpeg|webm|ogg)/gi) !== null ||
     342                        elem.type.match(/audio\/(ogg|mpeg|x-ms-wma)/gi) !== null ) {
     343                        chrome = true;
     344                    }
     345                });
     346
     347                return chrome;
     348
     349            } else if ( isFirefox ) {
     350                ff = false;
     351                media.find( 'source' ).each(function (i, elem) {
     352                    if ( elem.type.match(/video\/(ogg|webm)/gi) !== null ||
     353                        ( elem.type.match(/audio\/(ogg|mpeg)/gi) !== null && -1 === elem.src.indexOf('.m4a') ) ) {
     354                        ff = true;
     355                    }
     356                });
     357
     358                return ff;
     359
     360            } else if ( isSafari  ) {
     361                safari = false;
     362                media.find( 'source' ).each(function (i, elem) {
     363                    if ( elem.type.match(/video\/(mp4|m4v|mpeg|x-ms-wmv|quicktime)/gi) !== null ||
     364                        ( elem.type.match(/audio\/(mpeg|wav)/gi) !== null ) ) {
     365                        safari = true;
     366                    }
     367                });
     368
     369                return safari;
     370            }
     371
     372            return false;
    308373        },
    309374
Note: See TracChangeset for help on using the changeset viewer.