jenkins-bot has submitted this change and it was merged. Change subject: User-friendly prompt to install WebM components for Internet Explorer ......................................................................
User-friendly prompt to install WebM components for Internet Explorer Instead of giving a raw-file download prompt, link directly to Google's IE WebM plugin download page with some brief instructions. After installing, reload the page and *poof* the video works. Notes: * Components are not available for Windows RT (Windows on ARM), so the download is not offered in this case. * Components only work with IE 9 and above, but since the player framework doesn't seem to work on IE 8 and below anyway we don't bother to check versions here. * These really are WebM only, and do not include support for Ogg audio files. * In future, ogv.js should cover the audio case and low-resolution video case without the plugin prompt, but we'll still need WebM for HD video playback. Bug: T75348 Change-Id: I2ad8257d8752871b67632dc7b7b42d2825f8fc68 --- M MwEmbedModules/EmbedPlayer/EmbedPlayer.php M MwEmbedModules/EmbedPlayer/i18n/en.json M MwEmbedModules/EmbedPlayer/i18n/qqq.json A MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css A MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js M MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js M MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js 7 files changed, 100 insertions(+), 4 deletions(-) Approvals: Gilles: Looks good to me, approved jenkins-bot: Verified diff --git a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php index c60d41c..811db67 100644 --- a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php +++ b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php @@ -68,6 +68,10 @@ 'scripts'=> "resources/mw.EmbedPlayerVLCApp.js", 'dependencies' => array( 'mediawiki.Uri' ) ), + "mw.EmbedPlayerIEWebMPrompt" => array( + 'scripts' => 'resources/mw.EmbedPlayerIEWebMPrompt.js', + 'styles' => 'resources/mw.EmbedPlayerIEWebMPrompt.css', + ), "mw.EmbedPlayerImageOverlay" => array( 'scripts'=> "resources/mw.EmbedPlayerImageOverlay.js" ), "mw.EmbedPlayerVlc" => array( 'scripts'=> "resources/mw.EmbedPlayerVlc.js" ), diff --git a/MwEmbedModules/EmbedPlayer/i18n/en.json b/MwEmbedModules/EmbedPlayer/i18n/en.json index 15b0061..2db508a 100644 --- a/MwEmbedModules/EmbedPlayer/i18n/en.json +++ b/MwEmbedModules/EmbedPlayer/i18n/en.json @@ -52,6 +52,7 @@ "mwe-embedplayer-ogg-player-webmNative": "HTML5 WebM player", "mwe-embedplayer-ogg-player-oggPlugin": "Generic Ogg plugin", "mwe-embedplayer-ogg-player-vlcAppPlayer": "VLC for iOS app", + "mwe-embedplayer-ogg-player-IEWebMPrompt": "IE WebM plugin downloader", "mwe-embedplayer-ogg-player-quicktime-mozilla": "QuickTime plugin", "mwe-embedplayer-ogg-player-quicktime-activex": "QuickTime ActiveX", "mwe-embedplayer-ogg-player-cortado": "Java Cortado", @@ -86,5 +87,8 @@ "mwe-embedplayer-vlcapp-downloadapp": "Download the VLC app from the App Store", "mwe-embedplayer-vlcapp-openvideo": "Open this video in the VLC app", "mwe-embedplayer-vlcapp-downloadvideo": "Download this video", - "mwe-embedplayer-vlcapp-vlcapppopup": "To play videos on this site, you need the free VLC app. Install now?" + "mwe-embedplayer-vlcapp-vlcapppopup": "To play videos on this site, you need the free VLC app. Install now?", + "mwe-embedplayer-iewebmprompt-intro": "Oops! One more thing before you can play this video...", + "mwe-embedplayer-iewebmprompt-linktext": "Install WebM media components for Microsoft Internet Explorer", + "mwe-embedplayer-iewebmprompt-outro": "Reload this page after installing." } diff --git a/MwEmbedModules/EmbedPlayer/i18n/qqq.json b/MwEmbedModules/EmbedPlayer/i18n/qqq.json index dd90245..3156fc8 100644 --- a/MwEmbedModules/EmbedPlayer/i18n/qqq.json +++ b/MwEmbedModules/EmbedPlayer/i18n/qqq.json @@ -28,6 +28,7 @@ "mwe-embedplayer-ogg-player-aacNative": "name of AAC player in configuration screen", "mwe-embedplayer-ogg-player-cortado": "{{optional}}", "mwe-embedplayer-ogg-player-selected": "{{Identical|Selected}}", + "mwe-embedplayer-ogg-player-IEWebMPrompt": "name of IE WebM plugin installer helper in configuration screen", "mwe-embedplayer-for_best_experience": "Shown when user's browser doesn't support playing videos. Parameters:\n* $1 - An empty <a> tag. Don't use this parameter.", "mwe-embedplayer-download-warn": "Parameters:\n* $1 - URL", "mwe-embedplayer-do_not_warn_again": "Standard message for disabling\nfuture identical warnings messages", @@ -39,5 +40,8 @@ "mwe-embedplayer-vlcapp-downloadapp": "First bullet point after the mwe-embedplayer-vlcapp-intro. Links to the download page for installing the vlc app ( https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8 ).", "mwe-embedplayer-vlcapp-openvideo": "Second bullet point after the mwe-embedplayer-vlcapp-intro. Link will open the video in the VLC app, if the app is installed", "mwe-embedplayer-vlcapp-downloadvideo": "Third bullet point after the mwe-embedplayer-vlcapp-intro. Linked directly to the video file", - "mwe-embedplayer-vlcapp-vlcapppopup": "Popup dialog box shown to user if they do not have the VLC app installed when trying to play a video on iPhone/iPad. Box will be presented with this message and two buttons (OK and cancel. Actual text of buttons may vary.) If user presses ok, they are redirected to https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8." + "mwe-embedplayer-vlcapp-vlcapppopup": "Popup dialog box shown to user if they do not have the VLC app installed when trying to play a video on iPhone/iPad. Box will be presented with this message and two buttons (OK and cancel. Actual text of buttons may vary.) If user presses ok, they are redirected to https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8.", + "mwe-embedplayer-iewebmprompt-intro": "Shown where a video would be on the page, on IE with no WebM or Ogg support. Followed by mwe-embedplayer-iewebmprompt-linktext", + "mwe-embedplayer-iewebmprompt-linktext": "Shown where a video would be on the page, on IE with no WebM or Ogg support. When clicked links to https://tools.google.com/dlpage/webmmf/", + "mwe-embedplayer-iewebmprompt-outro": "Shown where a video would be on the page, on IE with no WebM or Ogg support. Follows mwe-embedplayer-iewebmprompt-linktext" } diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css new file mode 100644 index 0000000..9cf7b49 --- /dev/null +++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css @@ -0,0 +1,18 @@ +.mwEmbedPlayer .iewebm-prompt { + position: absolute; + top: 100px; + bottom: 60px; + left: 20px; + right: 20px; + border-radius: 20px; + background-color: rgba(255, 255, 255, 0.75); + + width: auto !important; + height: auto !important; + + padding: 20px; +} + +.mwEmbedPlayer .iewebm-prompt div { + color: black; +} \ No newline at end of file diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js new file mode 100644 index 0000000..de8bf89 --- /dev/null +++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.js @@ -0,0 +1,46 @@ +/** + * Show a prompt to install WebM plugin for IE 9+ + */ + +( function( mw, $ ) { "use strict"; + +mw.EmbedPlayerIEWebMPrompt = { + // List of supported features (or lack thereof) + supports: { + 'playHead':false, /* The seek slider */ + 'pause':true, /* Play pause button in control bar */ + 'stop':true, /* Does this actually do anything?? */ + 'fullscreen':false, + 'timeDisplay':false, + 'volumeControl':false + }, + + // Instance name: + instanceOf:'IEWebMPrompt', + + /* + * Embed this "fake" player + * + * @return {String} + * embed code to link to WebM plugin download + */ + embedPlayerHTML: function() { + var pluginUrl = 'https://tools.google.com/dlpage/webmmf/', + $link; + + // Overlay the video placeholder with download plugin link. + $link = $( '<a></a>' ) + .attr( 'href', pluginUrl ) + .attr( 'target', '_blank' ) + .text( mw.msg( 'mwe-embedplayer-iewebmprompt-linktext' ) ); + $( this ).append( $( '<div class="iewebm-prompt"></div>' ) + .width( this.getWidth() ) + .height( this.getHeight() ) + .append( $( '<div></div>' ).text( mw.msg( 'mwe-embedplayer-iewebmprompt-intro' ) ) ) + .append( $link ) + .append( $( '<div></div>' ).text( mw.msg( 'mwe-embedplayer-iewebmprompt-outro' ) ) ) + ); + } +}; + +} )( window.mediaWiki, window.jQuery ); diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js index 6665080..4915b55 100644 --- a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js +++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js @@ -91,6 +91,12 @@ 'video/webm; codecs="vp8, vorbis"', ], 'VLCApp' ); +var IEWebMPrompt = new mw.MediaPlayer( 'IEWebMPrompt', [ + 'video/webm', + 'video/webm; codecs="vp8"', + 'video/webm; codecs="vp8, vorbis"' +], 'IEWebMPrompt' ); + // Generic plugin //var oggPluginPlayer = new mw.MediaPlayer( 'oggPlugin', ['video/ogg', 'application/ogg'], 'Generic' ); @@ -316,6 +322,20 @@ if ( mw.isIOS() ) { this.mediaPlayers.addPlayer( vlcAppPlayer ); } + + // Note IE 11 doesn't identify itself as 'MSIE'. + // For simplicity just check for the rendering engine codename 'Trident'. + if ( navigator.userAgent.indexOf( 'Trident' ) != -1 ) { + if ( this.mediaPlayers.isSupportedPlayer( 'webmNative' ) ) { + // IE has the WebM components already, leave it be! + } else if ( navigator.userAgent.indexOf( 'ARM' ) != -1 ) { + // Windows RT doesn't allow installation of the WebM components. + // Don't tease the poor user. + } else { + // Prompt user to install the WebM media components for IE 9+ + this.mediaPlayers.addPlayer( IEWebMPrompt ); + } + } // Allow extensions to detect and add their own "players" mw.log("EmbedPlayer::trigger:embedPlayerUpdateMediaPlayersEvent"); $( mw ).trigger( 'embedPlayerUpdateMediaPlayersEvent' , this.mediaPlayers ); diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js b/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js index 2080056..6cdf315 100644 --- a/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js +++ b/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js @@ -34,8 +34,8 @@ this.defaultPlayers['application/vnd.apple.mpegurl'] = ['Native']; this.defaultPlayers['video/ogg'] = ['Native', 'Vlc', 'Java', 'Generic', 'VLCApp']; - this.defaultPlayers['audio/webm'] = ['Native', 'Vlc', 'VLCApp']; - this.defaultPlayers['video/webm'] = ['Native', 'Vlc', 'VLCApp']; + this.defaultPlayers['audio/webm'] = ['Native', 'Vlc', 'VLCApp', 'IEWebMPrompt']; + this.defaultPlayers['video/webm'] = ['Native', 'Vlc', 'VLCApp', 'IEWebMPrompt']; this.defaultPlayers['application/ogg'] = ['Native', 'Vlc', 'Java', 'Generic', 'VLCApp']; this.defaultPlayers['audio/ogg'] = ['Native', 'Vlc', 'Java', 'VLCApp']; this.defaultPlayers['audio/mpeg']= ['Native', 'Kplayer']; -- To view, visit https://gerrit.wikimedia.org/r/172948 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I2ad8257d8752871b67632dc7b7b42d2825f8fc68 Gerrit-PatchSet: 5 Gerrit-Project: mediawiki/extensions/TimedMediaHandler Gerrit-Branch: master Gerrit-Owner: Brion VIBBER <br...@wikimedia.org> Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org> Gerrit-Reviewer: Gilles <gdu...@wikimedia.org> Gerrit-Reviewer: Siebrand <siebr...@kitano.nl> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits