Brion VIBBER has uploaded a new change for review.
https://gerrit.wikimedia.org/r/172948
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: 73348
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, 98 insertions(+), 3 deletions(-)
git pull
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TimedMediaHandler
refs/changes/48/172948/1
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 d3221a2..d0e41bb 100644
--- a/MwEmbedModules/EmbedPlayer/i18n/en.json
+++ b/MwEmbedModules/EmbedPlayer/i18n/en.json
@@ -50,6 +50,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",
@@ -84,5 +85,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 0b17710..72de442 100644
--- a/MwEmbedModules/EmbedPlayer/i18n/qqq.json
+++ b/MwEmbedModules/EmbedPlayer/i18n/qqq.json
@@ -35,5 +35,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..42da9a1
--- /dev/null
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerIEWebMPrompt.css
@@ -0,0 +1,18 @@
+.mwEmbedPlayer .iewebm-prompt {
+ position: absolute;
+ top: 60px;
+ 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 3749f80..826d90d 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
@@ -89,6 +89,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' );
@@ -314,6 +320,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 19e7fde..2e04e13 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
@@ -34,7 +34,7 @@
this.defaultPlayers['application/vnd.apple.mpegurl'] =
['Native'];
this.defaultPlayers['video/ogg'] = ['Native', 'Vlc', 'Java',
'Generic', 'VLCApp'];
- this.defaultPlayers['video/webm'] = ['Native', 'Vlc', 'VLCApp'];
+ 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: newchange
Gerrit-Change-Id: I2ad8257d8752871b67632dc7b7b42d2825f8fc68
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/TimedMediaHandler
Gerrit-Branch: master
Gerrit-Owner: Brion VIBBER <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
