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模式的vanilla 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自动播放视频。

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

阻止IE / Edge预加载视频

1 个答案: