Support chromeless Vimeo via MEjs:

* Bump MediaElement script loader versions to 2.16.2 - missed in [30634], oops!
* Add `Froogaloop` to `js/mediaelement` scripts for Vimeo
* Check for Vimeo in the same locations that YouTube is checked
* Dynamically load Froogaloop script in admin when editing a TinyMCE view
* Edit MediaElement to call `mejs.$.extend` instead of `$.extend` in `mejs.HtmlMediaElementShim.createPlugin()`, since `$` is not available via WP's jQuery (I will report this upstream):
6f9a78e008/src/js/me-shim.js (L631)

Fixes #29267.

Built from https://develop.svn.wordpress.org/trunk@31016


git-svn-id: http://core.svn.wordpress.org/trunk@30997 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/ajax-actions.php

@@ -2755,7 +2755,7 @@ function wp_ajax_parse_media_shortcode() {
 
 		wp_print_scripts( 'wp-playlist' );
 	} else {
-		wp_print_scripts( 'wp-mediaelement' );
+		wp_print_scripts( array( 'froogaloop', 'wp-mediaelement' ) );
 	}
 
 	wp_send_json_success( array(

wp-includes/js/media-audiovideo.js

@@ -688,12 +688,23 @@
 			this.controller.setState( 'add-' + this.controller.defaults.id + '-source' );
 		},
 
+		loadPlayer: function () {
+			this.players.push( new MediaElementPlayer( this.media, this.settings ) );
+			this.scriptXhr = false;
+		},
+
 		/**
 		 * @global MediaElementPlayer
 		 */
 		setPlayer : function() {
-			if ( ! this.players.length && this.media ) {
-				this.players.push( new MediaElementPlayer( this.media, this.settings ) );
+			if ( this.players.length || ! this.media ) {
+				return;
+			}
+
+			if ( this.media.src.indexOf( 'vimeo' ) && ! ( 'Froogaloop' in window ) && ! this.scriptXhr ) {
+				this.scriptXhr = $.getScript( baseSettings.pluginPath + 'froogaloop.min.js', _.bind( this.loadPlayer, this ) );
+			} else if ( ! this.scriptXhr ) {
+				this.loadPlayer();
 			}
 		},
 
@@ -814,7 +825,7 @@
 					video.show();
 				}
 
-				if ( ! video.hasClass('youtube-video') ) {
+				if ( ! video.hasClass('youtube-video') && ! video.hasClass('vimeo-video') ) {
 					this.media = media.view.MediaDetails.prepareSrc( video.get(0) );
 				} else {
 					this.media = video.get(0);

wp-includes/media-template.php

@@ -50,9 +50,14 @@ function wp_underscore_audio_template() {
 function wp_underscore_video_template() {
 	$video_types = wp_get_video_extensions();
 ?>
-<#  var w_rule = h_rule = '',
+<#  var w_rule = h_rule = '', classes = [],
 		w, h, settings = wp.media.view.settings,
-		isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
+		isYouTube = isVimeo = false;
+
+	if ( ! _.isEmpty( data.model.src ) ) {
+		isYouTube = data.model.src.match(/youtube|youtu\.be/);
+		isVimeo = -1 !== data.model.src.indexOf('vimeo');
+	}
 
 	if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
 		w = settings.contentWidth;
@@ -72,10 +77,19 @@ function wp_underscore_video_template() {
 	if ( h ) {
 		h_rule = 'height: ' + h + 'px;';
 	}
+
+	if ( isYouTube ) {
+		classes.push( 'youtube-video' );
+	}
+
+	if ( isVimeo ) {
+		classes.push( 'vimeo-video' );
+	}
+
 #>
 <div style="{{ w_rule }}{{ h_rule }}" class="wp-video">
 <video controls
-	class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
+	class="wp-video-shortcode {{ classes.join( ' ' ) }}"
 	<# if ( w ) { #>width="{{ w }}"<# } #>
 	<# if ( h ) { #>height="{{ h }}"<# } #>
 	<?php
@@ -100,6 +114,8 @@ function wp_underscore_video_template() {
 	<# if ( ! _.isEmpty( data.model.src ) ) {
 		if ( isYouTube ) { #>
 		<source src="{{ data.model.src }}" type="video/youtube" />
+		<# } else if ( isVimeo ) { #>
+		<source src="{{ data.model.src }}" type="video/vimeo" />
 		<# } else { #>
 		<source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
 		<# }
@@ -1092,8 +1108,7 @@ function wp_print_media_templates() {
 			<div class="embed-media-settings embed-video-settings">
 				<div class="wp-video-holder">
 				<#
-				var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
-					w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
+				var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
 					h = ! data.model.height ? 360 : data.model.height;
 
 				if ( data.model.width && w !== data.model.width ) {

wp-includes/media.php

@@ -1754,16 +1754,25 @@ function wp_video_shortcode( $attr, $content = '' ) {
 		}
 	}
 
+	$is_vimeo = $is_youtube = false;
 	$yt_pattern = '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#';
+	$vimeo_pattern = '#^https?://(.+\.)?vimeo\.com/.*#';
 
 	$primary = false;
 	if ( ! empty( $atts['src'] ) ) {
-		if ( ! preg_match( $yt_pattern, $atts['src'] ) ) {
+		$is_vimeo = ( preg_match( $vimeo_pattern, $atts['src'] ) );
+		$is_youtube = (  preg_match( $yt_pattern, $atts['src'] ) );
+		if ( ! $is_youtube && ! $is_vimeo ) {
 			$type = wp_check_filetype( $atts['src'], wp_get_mime_types() );
 			if ( ! in_array( strtolower( $type['ext'] ), $default_types ) ) {
 				return sprintf( '<a class="wp-embedded-video" href="%s">%s</a>', esc_url( $atts['src'] ), esc_html( $atts['src'] ) );
 			}
 		}
+
+		if ( $is_vimeo ) {
+			wp_enqueue_script( 'froogaloop' );
+		}
+
 		$primary = true;
 		array_unshift( $default_types, 'src' );
 	} else {
@@ -1848,8 +1857,10 @@ function wp_video_shortcode( $attr, $content = '' ) {
 			if ( empty( $fileurl ) ) {
 				$fileurl = $atts[ $fallback ];
 			}
-			if ( 'src' === $fallback && preg_match( $yt_pattern, $atts['src'] ) ) {
+			if ( 'src' === $fallback && $is_youtube ) {
 				$type = array( 'type' => 'video/youtube' );
+			} elseif ( 'src' === $fallback && $is_vimeo ) {
+				$type = array( 'type' => 'video/vimeo' );
 			} else {
 				$type = wp_check_filetype( $atts[ $fallback ], wp_get_mime_types() );
 			}

wp-includes/script-loader.php

@@ -306,7 +306,7 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.10', 1 );
 
-	$scripts->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelement-and-player.min.js", array('jquery'), '2.15.1', 1 );
+	$scripts->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelement-and-player.min.js", array('jquery'), '2.16.2', 1 );
 	did_action( 'init' ) && $scripts->localize( 'mediaelement', 'mejsL10n', array(
 		'language' => get_bloginfo( 'language' ),
 		'strings'  => array(
@@ -331,6 +331,7 @@ function wp_default_scripts( &$scripts ) {
 		'pluginPath' => includes_url( 'js/mediaelement/', 'relative' ),
 	) );
 
+	$scripts->add( 'froogaloop',  "/wp-includes/js/mediaelement/froogaloop.min.js", array(), '2.0' );
 	$scripts->add( 'wp-playlist', "/wp-includes/js/mediaelement/wp-playlist.js", array( 'wp-util', 'backbone', 'mediaelement' ), false, 1 );
 
 	$scripts->add( 'zxcvbn-async', "/wp-includes/js/zxcvbn-async$suffix.js", array(), '1.0' );
@@ -638,7 +639,7 @@ function wp_default_styles( &$styles ) {
 	// External libraries and friends
 	$styles->add( 'imgareaselect',       '/wp-includes/js/imgareaselect/imgareaselect.css', array(), '0.9.8' );
 	$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array( 'dashicons' ) );
-	$styles->add( 'mediaelement',        "/wp-includes/js/mediaelement/mediaelementplayer.min.css", array(), '2.15.1' );
+	$styles->add( 'mediaelement',        "/wp-includes/js/mediaelement/mediaelementplayer.min.css", array(), '2.16.2' );
 	$styles->add( 'wp-mediaelement',     "/wp-includes/js/mediaelement/wp-mediaelement.css", array( 'mediaelement' ) );
 	$styles->add( 'thickbox',            '/wp-includes/js/thickbox/thickbox.css', array( 'dashicons' ) );
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-alpha-31015';
+$wp_version = '4.2-alpha-31016';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.