Brian Wolff has uploaded a new change for review.

  https://gerrit.wikimedia.org/r/144349

Change subject: [WIP; untested] Launch videos in VLC app on iOS if installed
......................................................................

[WIP; untested] Launch videos in VLC app on iOS if installed

iOS does not support ogg/webm. Direct people to install iOS app
instead, and direct them to view videos in that instead.

This is meant as a somewhat short term solution. After the
kaltura player update (whenever that happens), it may make sense
to replace this sort of thing with ogv.js, or perhaps keep this
vlc triggering code. Either way, in the near term this is a
relative simple fix that would help us reach 11.4% of our user base.

Bug: 61095
Change-Id: I6c3b5d8aadbd69577df3fe513f780f69708450d5
---
M MwEmbedModules/EmbedPlayer/EmbedPlayer.php
M MwEmbedModules/EmbedPlayer/i18n/en.json
M MwEmbedModules/EmbedPlayer/i18n/qqq.json
A MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerVLCApp.js
M MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
M MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
M MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js
7 files changed, 129 insertions(+), 7 deletions(-)


  git pull 
ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/TimedMediaHandler 
refs/changes/49/144349/1

diff --git a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php 
b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
index 66f6c32..9f1eadd 100644
--- a/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
+++ b/MwEmbedModules/EmbedPlayer/EmbedPlayer.php
@@ -64,6 +64,7 @@
                        "mw.EmbedPlayerGeneric" => array( 'scripts'=> 
"resources/mw.EmbedPlayerGeneric.js" ),
                        "mw.EmbedPlayerJava" => array( 'scripts'=> 
"resources/mw.EmbedPlayerJava.js"),
                        "mw.EmbedPlayerNative"  => array( 'scripts'=> 
"resources/mw.EmbedPlayerNative.js" ),
+                       "mw.EmbedPlayerVLCApp"  => array( 'scripts'=> 
"resources/mw.EmbedPlayerVLCApp.js" ),
                        "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 3534011..a2e6abc 100644
--- a/MwEmbedModules/EmbedPlayer/i18n/en.json
+++ b/MwEmbedModules/EmbedPlayer/i18n/en.json
@@ -49,6 +49,7 @@
     "mwe-embedplayer-ogg-player-h264Native": "HTML5 H.264 player",
     "mwe-embedplayer-ogg-player-webmNative": "HTML5 WebM player",
     "mwe-embedplayer-ogg-player-oggPlugin": "Generic Ogg plugin",
+    "mwe-embedplayer-ogg-player-VLCApp": "VLC for iOS app",
     "mwe-embedplayer-ogg-player-quicktime-mozilla": "QuickTime plugin",
     "mwe-embedplayer-ogg-player-quicktime-activex": "QuickTime ActiveX",
     "mwe-embedplayer-ogg-player-cortado": "Java Cortado",
@@ -77,5 +78,11 @@
     "mwe-embedplayer-video-3gp": "3GP video",
     "mwe-embedplayer-video-mpeg": "MPEG video",
     "mwe-embedplayer-video-msvideo": "AVI video",
-    "mwe-embedplayer-missing-source": "No source video was found"
-}
\ No newline at end of file
+    "mwe-embedplayer-missing-source": "No source video was found",
+    "mwe-embedplayer-vlcapp-intro": "In order to view videos from this site on 
an iPhone or iPad, you need the free $1.",
+    "mwe-embedplayer-vlcapp-vlcapplinktext": "VLC app",
+    "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?"
+}
diff --git a/MwEmbedModules/EmbedPlayer/i18n/qqq.json 
b/MwEmbedModules/EmbedPlayer/i18n/qqq.json
index cf3c762..3fb50a0 100644
--- a/MwEmbedModules/EmbedPlayer/i18n/qqq.json
+++ b/MwEmbedModules/EmbedPlayer/i18n/qqq.json
@@ -22,6 +22,7 @@
        "mwe-embedplayer-close_btn": "{{Identical|Close}}",
        "mwe-embedplayer-ogg-player-mp3Native": "name of mp3 player in 
configuration screen",
        "mwe-embedplayer-ogg-player-aacNative": "name of AAC player in 
configuration screen",
+       "mwe-embedplayer-ogg-player-VLCApp": "Name for launching video in 
external VLC app, in the media player configuration screen. Only shown on 
iPhones/iPads"
        "mwe-embedplayer-ogg-player-cortado": "{{optional}}",
        "mwe-embedplayer-ogg-player-selected": "{{Identical|Selected}}",
        "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.",
@@ -29,5 +30,11 @@
        "mwe-embedplayer-do_not_warn_again": "Standard message for 
disabling\nfuture identical warnings messages",
        "mwe-embedplayer-playerSelect": "{{Identical|Player}}",
        "mwe-embedplayer-embed_site_or_blog": "title for iframe embed code in 
share dialog",
-       "mwe-embedplayer-embed_wiki": "title for wiki embed code in share 
dialog"
+       "mwe-embedplayer-embed_wiki": "title for wiki embed code in share 
dialog",
+       "mwe-embedplayer-vlcapp-intro": "Shown where a video would be on the 
page, on iPhones/iPads. Parameter $1 is a link to the App store page for the 
vlc app, with the text contianed in the mwe-embedplayer-vlcapp-vlcapplinktext 
message. This message is followed by a bulleted list of links consisting of the 
messages: mwe-embedplayer-vlcapp-downloadapp, mwe-embedplayer-vlcapp-openvideo, 
mwe-embedplayer-vlcapp-openvideo. See also the related 
mwe-embedplayer-vlcapp-vlcapppopup message.",
+       "mwe-embedplayer-vlcapp-vlcapplinktext": "Text of the $1 parameter of 
mwe-embedplayer-vlcapp-intro. Will be linked 
tohttps://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8 (the download 
page for the vlc app).",
+       "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.";
 }
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerVLCApp.js 
b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerVLCApp.js
new file mode 100644
index 0000000..732f7fd
--- /dev/null
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedPlayerVLCApp.js
@@ -0,0 +1,86 @@
+/**
+ * Play the video using the vlc app on iOS
+ */
+
+( function( mw, $ ) { "use strict";
+
+mw.EmbedPlayerVLCApp = {
+       // List of supported features (or lack thereof)
+        supports: {
+               'playHead':false,
+               'pause':false,
+               'stop':true,
+               'fullscreen':false,
+               'timeDisplay':false,
+               'volumeControl':false
+       },
+
+       // Instance name:
+       instanceOf:'VLCApp',
+
+       /*
+       * Embed this "fake" player
+       *
+       * @return {String}
+       *       embed code to link to VLC app
+       */
+       embedPlayerHTML: function() {
+               var fileUrl = this.getSrc( this.seekTimeSec ),
+                       vlcUrl = 'vlc://' + fileUrl,
+                       appStoreUrl = 
'https://itunes.apple.com/us/app/vlc-for-ios/id650377962?mt=8',
+                       appInstalled = false,
+                       promptInstallTimeout;
+
+               // Replace video with download in vlc link.
+               $( this ).html( $( '<div class="vlcapp-player"></div>' )
+                       .width( this.getWidth() )
+                       .height( this.getHeight() )
+                       .append(
+                               // mw.msg doesn't have rawParams() equivalent. 
Lame.
+                               mw.html.escape(
+                                       mw.msg( 'mwe-embedplayer-vlcapp-intro' 
).replace( /\$1/g,
+                                               $( '<a></a>' ).attr( 'href', 
appStoreUrl )
+                                                       .text( mw.msg( 
'mwe-embedplayer-vlcapp-vlcapplinktext' ) )
+                                       )
+                               )
+                       ).append( $( '<ul></ul>' )
+                               .append( $( '<li></li>' ).append( $( '<a></a>' 
).attr( 'href', appStoreUrl )
+                                       .text( mw.msg( 
'mwe-embedplayer-vlcapp-downloadapp' ) ) )
+                               ).append( $( '<li></li>' ).append( $( '<a></a>' 
).attr( 'href', vlcUrl )
+                                       .text( mw.msg( 
'mwe-embedplayer-vlcapp-openvideo' ) ) )
+                               ).append( $( '<li></li>' ).append( $( '<a></a>' 
).attr( 'href', fileUrl )
+                                       .text( mw.msg( 
'mwe-embedplayer-vlcapp-downloadvideo' ) ) )
+                               )
+                       )
+               );
+
+               // Try to auto-open in vlc.
+               // Based on 
http://stackoverflow.com/questions/627916/check-if-url-scheme-is-supported-in-javascript
+
+               $( window ).one( 'pagehide', function() {
+                       appInstalled = true;
+                       if ( promptInstallTimeout ) {
+                               window.clearTimeout( promptInstallTimeout );
+                       }
+               } );
+               try {
+                       window.location = vlcUrl;
+               } catch( e ) {
+                       // FIXME, temporary for testing. Unclear if iOS throws 
exception.
+                       alert( "Exception from setting url " + e );
+               }
+               promptInstallTimeout = window.setTimeout( function() {
+                       var install;
+                       if ( appInstalled ) {
+                               return;
+                       }
+                       install = confirm( 'To play videos on this site, you 
need the free VLC app. Install now?' );
+                       if ( install ) {
+                               window.location = appStoreUrl;
+
+                       }
+               }, 600 );
+       }
+};
+
+} )( window.mediaWiki, window.jQuery );
diff --git a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js 
b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
index aa5ff47..3749f80 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.EmbedTypes.js
@@ -76,6 +76,19 @@
 //var vlcMimeList = ['video/ogg', 'audio/ogg', 'audio/mpeg', 
'application/ogg', 'video/x-flv', 'video/mp4', 'video/h264', 'video/x-msvideo', 
'video/mpeg', 'video/3gp'];
 //var vlcPlayer = new mw.MediaPlayer( 'vlc-player', vlcMimeList, 'Vlc' );
 
+var vlcAppPlayer = new mw.MediaPlayer( 'vlcAppPlayer', [
+       'video/ogg',
+       'video/ogg; codecs="theora"',
+       'video/ogg; codecs="theora, vorbis"',
+       'audio/ogg',
+       'audio/ogg; codecs="vorbis"',
+       'audio/ogg; codecs="opus"',
+       'application/ogg',
+       'video/webm',
+       'video/webm; codecs="vp8"',
+       'video/webm; codecs="vp8, vorbis"',
+], 'VLCApp' );
+
 // Generic plugin
 //var oggPluginPlayer = new mw.MediaPlayer( 'oggPlugin', ['video/ogg', 
'application/ogg'], 'Generic' );
 
@@ -298,6 +311,9 @@
                        }
                }
 
+               if ( mw.isIOS() ) {
+                       this.mediaPlayers.addPlayer( vlcAppPlayer );
+               }
                // 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 7d515e9..19e7fde 100644
--- a/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
+++ b/MwEmbedModules/EmbedPlayer/resources/mw.MediaPlayers.js
@@ -33,10 +33,10 @@
 
                this.defaultPlayers['application/vnd.apple.mpegurl'] = 
['Native'];
 
-               this.defaultPlayers['video/ogg'] = ['Native', 'Vlc', 'Java', 
'Generic'];
-               this.defaultPlayers['video/webm'] = ['Native', 'Vlc'];
-               this.defaultPlayers['application/ogg'] = ['Native', 'Vlc', 
'Java', 'Generic'];
-               this.defaultPlayers['audio/ogg'] = ['Native', 'Vlc', 'Java' ];
+               this.defaultPlayers['video/ogg'] = ['Native', 'Vlc', 'Java', 
'Generic', 'VLCApp'];
+               this.defaultPlayers['video/webm'] = ['Native', 'Vlc', 'VLCApp'];
+               this.defaultPlayers['application/ogg'] = ['Native', 'Vlc', 
'Java', 'Generic', 'VLCApp'];
+               this.defaultPlayers['audio/ogg'] = ['Native', 'Vlc', 'Java', 
'VLCApp'];
                this.defaultPlayers['audio/mpeg']= ['Native', 'Kplayer'];
                this.defaultPlayers['audio/mp3']= ['Native', 'Kplayer'];
                this.defaultPlayers['audio/mp4']= ['Native'];
diff --git 
a/MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js 
b/MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js
index bea9458..98602da 100644
--- a/MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js
+++ b/MwEmbedModules/EmbedPlayer/resources/skins/mw.PlayerControlBuilder.js
@@ -1354,6 +1354,11 @@
                        return false;
                }
 
+               // Not a lot of good options for an iPhone
+               if( this.embedPlayer.instanceOf == 'VLCApp' ){
+                       return false;
+               }
+
                // Chrome's webM support is oky though:
                if( /chrome/.test(navigator.userAgent.toLowerCase() ) &&
                        mw.EmbedTypes.getMediaPlayers().getMIMETypePlayers( 
'video/webm' ).length ){

-- 
To view, visit https://gerrit.wikimedia.org/r/144349
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I6c3b5d8aadbd69577df3fe513f780f69708450d5
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/TimedMediaHandler
Gerrit-Branch: master
Gerrit-Owner: Brian Wolff <bawolff...@gmail.com>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to