Feature Request html5 video as .gif replacement

just_me

Well-Known Member
Standard Donor
People seem to get into the habit of posting obscenely large .gifs and a single page load might require 100+MB of data (and it's not just the DoAX3 Thread :p )
However more often than not those .gifs are hosted on services that automatically convert to and provide video alternatives (imgur, gfycat)

Is it possible to replace those .gifs with an html5 video element with looped as an attribute (and maybe autoplay and muted)?

Either by checking the content of the image tag, or providing a new tag [gifv] or whatever…
I know it's a bit of a pain as you have to splice up the URL and generate a new one based on extension and host, but it could save about 90% of the load on some pages.

EDIT: got it… that appears to work:
Code:
(function($){
var get_element_url = function(){
var url, options, defaults;
defaults = {
gfycat: {host: "(giant[.])?gfycat[.]com", replace_host: true, replace_with: "zippy.gfycat.com", extensions: ['', '.gif']},
imgur: {host: "imgur[.]com", replace_host: false, extensions: ['.gifv', '.gif']}
};
url = arguments[0];
if(url === null || url === undefined) return;
options = arguments[1];
var opts = $.extend({}, defaults, options || {});
var a = document.createElement('a');
a.href= url;
var extension = (a.pathname.match(/.*([.]\w{2,4})/)||[,''])[1];
$.each(opts, function(i, site){
if(a.hostname.match(site.host)){
if(site.replace_host) a.hostname = site.replace_with;
$.each(site.extensions, function(j, ext){
if(extension === ext){
var len = a.pathname.length -extension.length;
a.pathname = a.pathname.substring(0, len);
a.pathname += ".mp4";
return false;
}
});
return false;
}
});
return a.href;
};
var get_element_html = function(url){
var final_url,cleaned_url;
final_url = cleaned_url = get_element_url(url);
if( typeof XenForo !== 'undefined'){
var cleaned_url =XenForo.htmlspecialchars(final_url);
}
if(final_url === url){
return '<img src="' + cleaned_url + '" alt="[IMG]" unselectable="on" />&nbsp;';
}
else{
//create a video element…return '<video loop autoplay muted controls class="gifvid"><source src="'+cleaned_url+'"></video>&nbsp;';
}
};
XenForo.BbCodeWysiwygEditor.prototype.getImageModal = function(ed)
{
var self = this;

ed.saveSelection();

var selHtml = ed.getSelectedHtml(), defaultVal;
if (selHtml.match(/^\s*<img[^>]+src="([^"]+)"[^>]*>\s*$/) && !selHtml.match(/mceSmilie|attachFull|attachThumb/))
{
defaultVal = RegExp.$1;
}

ed.modalInit(this.getText('image'), { url: this.dialogUrl + '&dialog=image' }, 600, $.proxy(function()
{
var $input = $('#redactor_image_link');

$('#redactor_image_btn').click(function(e) {
e.preventDefault();

ed.restoreSelection();

var val = $input.val();
if (val !== '')
{
if (!val.match(/^https?:|ftp:/i))
{
val = 'http://' + val;
}
ed.pasteHtmlAtCaret(get_element_html(val));
//ed.pasteHtmlAtCaret('<img src="' + XenForo.htmlspecialchars(val) + '" alt="[IMG]" unselectable="on" />&nbsp;');}

ed.modalClose();
ed.observeImages();
ed.focus();
});

if (defaultVal)
{
$input.val(defaultVal);
}

setTimeout(function() {
$input.focus();
}, 100);

}, ed));
}
})(jQuery);


tho I think it throws away the video element in the backend… whitelist issue I guess… *sigh* almost
 
Last edited:
ALL DOA6 DOA5 DOA4 DOA3 DOA2U DOAD
Top