Src comparison does not work on relative URLs

[gavin310]

Thanks for this great code!

On line 79:
https://github.com/tech-marketing/video-srcset/blob/fea484de46d8a50efc60178dfeed9010a8cbd027/src/video-srcset.js#L79
There is the comparison to test if it should update the src or not. If you use relative URLs like in the main example (e.g. <video srcset="videos/mobile-video.mp4 768w, videos/tablet-video.mp4 1200w, videos/desktop-video.mp4 1920w"></video>) this comparison does not ever equate to true, because selectedSource will be the relative URL, but element.src will be the full URL including http://.

I fixed this by changing line 79 to:

if(element.src.slice(-selectedSource.length) !== selectedSource) {

Maybe there's a better way?

[yaronuliel]

try using this method https://codepen.io/yaronuliel-the-sans/pen/MWeedQw to convert relative to absolute links

function getabs(rel) {
  if( 'URL' in window) {
    return (new URL(rel, location.href)).toString();
  } else {
    var a = document.createElement('a')
    a.href = rel 
    return a.href
  }
}