如何在禁用缓存时阻止HTML5循环视频无限下载

时间:2015-08-31 21:17:35

标签: html5 caching bandwidth autoplay ddos

我遇到了带宽问题。

我在循环播放HTML5视频。当访问者登陆网站时,它会自动开始播放。它通常会向用户提供一次,但是什么是阻止任何人完全禁用缓存并且每次结束并尝试循环时再次向他们提供视频?

我问的原因是因为我打开了谷歌开发者控制台设置并检查了“当DevTools打开时禁用缓存”。我离开页面很长一段时间,使用了10GB的带宽!如果我可以破坏我的带宽,那么我假设任何人都可以。

我该如何解决这个问题?这是HTML5视频代码。如果您想知道,数据属性是skrollr.js功能。

            <video id="videoOne" autoplay poster="" style="width: 1920px; height: auto; visibility: visible; z-index: 0;" class="landscape desktop"  loop data-anchor-target="#fixTest" data-top="display: block; opacity:1; transform:translateY(0px);" data--70p-top="display: none; opacity:0; transform:translateY(-50px);">
                <source src="img/landVid3.mp4" type="video/mp4">
            </video>

1 个答案:

答案 0 :(得分:0)

如果您使用一点JavaScript,则可以通过XMLHttpRequest加载视频。类似的东西:

var xhr = new XMLHttpRequest();
xhr.open("GET", "img/landVid3.mp4", true);
xhr.responseType = "blob";
xhr.onload = function () {
    var video = document.getElementById("videoOne");
    video.src = window.URL.createObjectURL(xhr.response);
    video.play();
};
xhr.send();

代码改编自this question。当然,正如问题的答案所述,将视频源设置为文件的实际路径要好得多,但在您的情况下,您已经完成了这一点,并认为这是一个坏主意。