javascript - 阻止 IE/Edge 预加载视频

Question

我有一个页面，它在每次页面加载时动态显示数十个视频(出于技术原因)。我的规范要求我在 HTML 中让每个视频都可以点击。

即:

    <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 的速度或导致 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 添加源代码。由于在页面加载时 src 不存在，因此在 IE/Edge 中没有要预加载的内容。正如原帖评论中提到的，您可以添加图像缩略图，也可以使用 JS 自动播放视频。

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