masq
/
glowing-bear
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Jordan Callicoat 2017-04-18 16:31:52 +00:00
parent e7fdf05890
commit 14879811a5
1 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/plugins.js
View File

@ -339,17 +339,27 @@ plugins.factory('userPlugins', function() {
*/ */
var videoPlugin = new UrlPlugin('video', function(url) { var videoPlugin = new UrlPlugin('video', function(url) {
if (url.match(/\.(3gp|avi|flv|gifv|mkv|mp4|ogv|webm|wmv)\b/i)) { 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() { return function() {
var element = this.getElement(); var element = this.getElement(), src;
var velement = angular.element('<video autoplay loop muted></video>') var velement = angular.element('<video autoplay loop muted></video>')
.addClass('embed') .addClass('embed')
.attr('width', '560') .attr('width', '560');
.append(angular.element('<source></source>') // imgur doesn't always have webm for gifv so add sources for webm and mp4
.attr('src', url)); 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'); element.innerHTML = velement.prop('outerHTML');
}; };
} }