media-min-width.html (954B)
1 <!DOCTYPE html> 2 <video width="200"></video> 3 <script> 4 function createSource(src, media) { 5 var source = document.createElement('source'); 6 source.src = src; 7 if (media) { 8 source.media = media; 9 } 10 return source; 11 } 12 const rAF = () => new Promise(resolve => requestAnimationFrame(resolve)); 13 const hash = str => str.substr(str.lastIndexOf('#')); 14 (async () => { 15 const v = document.querySelector('video'); 16 v.getBoundingClientRect(); // force layout flush. ensure viewport dimensions are up-to-date 17 v.append(createSource('/media-source/mp4/test.mp4#a', '(min-width: 200px)')); 18 v.append(createSource('/media-source/mp4/test.mp4#b')); 19 await rAF(); 20 await rAF(); 21 window.resolveBeforeEnvChange(hash(v.currentSrc)); 22 window.frameElement.width = '150'; 23 await rAF(); 24 await rAF(); 25 window.resolveAfterEnvChange(hash(v.currentSrc)); 26 v.load() 27 await rAF(); 28 await rAF(); 29 window.resolveAfterLoadCalled(hash(v.currentSrc)); 30 })(); 31 </script>