Preventing IE / Edge from preloading video

Question

I have a page which dynamically displays dozens of videos (for technical reasons) on each page load. My specifications require me to have each video clickable in the HTML.

IE:

    <video id="video-01448_1" preload="none" controls="">
        <source src="https://downloadurl.com/filename1.mp4" type="video/mp4">
    </video>
    <video id="video-01448_2" preload="none" controls="">
        <source src="https://downloadurl.com/filename2.mp4" type="video/mp4">
    </video>
    ... more videos

preload="none" works in Chrome, FireFox and other browsers, but IE will still preload a few seconds of each video. This is fine when only a couple videos are on the page, but it slows down or literally crashes IE/Edge when 100+ video links are on the page.

This is a known issue with Microsoft, however not a bug as preload is merely considered a suggestion for the browser.

See: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7117594/

My question... Is there a simple solution or workaround for this situation?

Answer 1

I couldn't find a simple solution to this issue anywhere online, so I figured out a vanilla JavaScript answer using Bootstrap modals:

    <a href="#modalId" data-toggle="modal" onclick="addSrcToVideo('videoId','/videoFileLocation.mp4'" >View Video</a>

    <script>
    function addSrcToVideo(vidId, src) {
        var video = document.getElementById(vidId);
        video.src = src;
    }
    </script>

This simply uses JavaScript to add the source a the time you click the modal link. Since the src does not exist at the time of the page load, there is nothing to preload in IE/Edge. As mentioned in the comments of the original post, you can add an image thumbnail or you can just auto play the video using JS.

Note: I don't think this is the best option as it doesn't create a <source src=...> attribute. If you have a better solution that works, I can mark yours as the answer.