防止IE/Edge预载视频 [英] Preventing IE / Edge from preloading video

问题描述

我有一个页面，该页面在每次加载页面时都会动态显示数十个视频(出于技术原因).我的规格要求我必须在HTML中点击每个视频.

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"可在Chrome，FireFox和其他浏览器中使用，但IE仍会预加载每个视频的几秒钟.当页面上只有几个视频时，这很好，但是当页面上有100多个视频链接时，它会减慢速度或使IE/Edge崩溃.

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.

这是Microsoft的一个已知问题，但不是错误，因为预加载只是浏览器的建议.

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

请参阅: https://developer.microsoft. com/en-us/microsoft-edge/platform/issues/7117594/

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

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

推荐答案

在网上的任何地方我都找不到解决此问题的简单解决方案，因此我使用Bootstrap模态找出了一种有效的JavaScript答案:

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>

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

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.

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

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.

这篇关于防止IE/Edge预载视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！