From 14879811a51efbe5978adeea3039d341e99d9bf6 Mon Sep 17 00:00:00 2001
From: Jordan Callicoat <jordan.callicoat@gmail.com>
Date: Tue, 18 Apr 2017 16:31:52 +0000
Subject: [PATCH] Make videoPlugin work for all imgur gifv videos

Some gifv links on imgur.com do not have an associated webm video
and only provide an mp4 video. Add two source elements with proper
mimetypes for both types of video. The video player will fall back
to the secondary source if the first cannot be loaded (due to 404)

Example: Trying to load the webm version of this video

  http://i.imgur.com/i7D4GRb.webm

will result in a 302 redirect to the gifv url, which tries to load
an HTML document. This will cause our video player to reject the
document as an invalid video format (text/html); on some videos it
will simply 404. The mp4 version is available and our player will
fall back to that.
---
 js/plugins.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/js/plugins.js b/js/plugins.js
index dc02775..92d7d37 100644
--- a/js/plugins.js
+++ b/js/plugins.js
@@ -339,17 +339,27 @@ plugins.factory('userPlugins', function() {
      */
     var videoPlugin = new UrlPlugin('video', function(url) {
         if (url.match(/\.(3gp|avi|flv|gifv|mkv|mp4|ogv|webm|wmv)\b/i)) {
-            if (url.match(/^http:\/\/(i\.)?imgur\.com\//i)) {
-                // remove protocol specification to load over https if used by g-b
-                url = url.replace(/\.(gifv)\b/i, ".webm");
-            }
             return function() {
-                var element = this.getElement();
+                var element = this.getElement(), src;
                 var velement = angular.element('<video autoplay loop muted></video>')
                                      .addClass('embed')
-                                     .attr('width', '560')
-                                     .append(angular.element('<source></source>')
-                                                    .attr('src', url));
+                                     .attr('width', '560');
+                // imgur doesn't always have webm for gifv so add sources for webm and mp4
+                if (url.match(/^http:\/\/(i\.)?imgur\.com\//i) &&
+                    url.indexOf('.gifv') > -1) {
+                    src = angular.element('<source></source>')
+                                 .attr('src', url.replace(/\.gifv\b/i, ".webm"))
+                                 .attr('type', 'video/webm');
+                    velement.append(src);
+                    src = angular.element('<source></source>')
+                                 .attr('src', url.replace(/\.gifv\b/i, ".mp4"))
+                                 .attr('type', 'video/mp4');
+                    velement.append(src);
+                } else {
+                    src = angular.element('<source></source>')
+                                 .attr('src', url);
+                    velement.append(src);
+                }
                 element.innerHTML = velement.prop('outerHTML');
             };
         }