阻止 IE / Edge 预加载视频

Question

我有一个页面在每次加载页面时动态显示数十个视频（出于技术原因）。我的规格要求我在 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" 适用于 Chrome、FireFox 和其他浏览器，但 IE 仍会预加载每个视频几秒钟。当页面上只有几个视频时这很好，但是当页面上有 100 多个视频链接时它会变慢或崩溃 IE/Edge。

这是 Microsoft 的一个已知问题，但不是错误，因为预加载仅被视为对浏览器的建议。

参见：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7117594/

我的问题...是否有针对这种情况的简单解决方案或解决方法？

Answer 1

我无法在网上任何地方找到解决此问题的简单方法，因此我使用 Bootstrap 模态想出了一个普通的 JavaScript 答案：

    <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>

这只是使用 JavaScript 在您单击模式 link 时添加源。由于在页面加载时 src 不存在，因此 IE/Edge 中没有要预加载的内容。正如原评论中提到的 post，您可以添加图像缩略图，也可以使用 JS 自动播放视频。

注意：我认为这不是最佳选择，因为它不会创建属性。如果您有更好的解决方案，我可以将您的解决方案标记为答案。

阻止 IE / Edge 预加载视频

Preventing IE / Edge from preloading video

html

javascript

video

preload

microsoft-edge