Allow multiple, configurable patterns for substitution

[sjwilliams]

Allow multiple, configurable patterns for substitution

[erikreyna]

@sjwilliams I've just run into something that this would have helped on, particularly with a set of source elements in the video object. Trying to work on a solution, if I get it working I'll submit a PR.

[erikreyna]

That said, I think my problem is more on the support for the html5 video object. If I'm missing something let me know but looking at the source, getSource just looks for a src attr in the element we're passing through, which doesn't necessarily work for html5 video sets. Will 🔍

[sjwilliams]

@erikreyna, yea it wouldn't work out of the box for <source> nodes in the video element.

Instead of getSource(), could you do something like this?: (untested, just thinking out loud)

$('video').laziestloader({
    threshold: 100,
    setSourceMode: false // this is the important bit, and allows you to use laziest loader just to maintain scroll awareness
}, function(){
    var slug = "SLUG"; // from a data attribute on the element or something..
    var $video = $(this);
    var srcWidth = $().laziestloader.bestFit($video.width(), [200, 700, 900, 1200]); // these are your available encode widths
    var mp4 = '//somepath/toyour/media/'+slug+'-'+srcWidth+'.mp4';
    var webm = '//somepath/toyour/media/'+slug+'-'+srcWidth+'.webm';
    $video.append('<source src="'+mp4+'" type="video/mp4">');
    $video.append('<source src="'+webm+'" type="video/webm">');
});

[erikreyna]

That looks like it could work, for now I'm headed another route to get this feature out the door but I'll probably still work on something that could work out of the box and submit a PR.

[sjwilliams]

It's been a year and I've not felt the need to do this again. I tend to do something like the video example above when needed. I'm closing and can revisit later if need arises.