Chrome 开发者工具网络选项卡中缺少视频内容

Question

以下网站： http://www.themedept.com/demo/getleads/agency.html

显示循环视频： http://www.themedept.com/demo/getleads/images/video/video.mp4

为什么该视频视频没有出现在 Chrome 浏览器开发者网络工具选项卡中：

附加信息： 该视频是通过 Javascript 调用的，它将以下元素添加到页面

<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; width: 1352px; height: auto;"><source src="images/video/video.mp4" type="video/mp4"><source src="images/video/video.webm" type="video/webm"><source src="images/video/video.ogv" type="video/ogg"></video>

调用此函数的 Javascript 来自文件： http://www.themedept.com/demo/getleads/js/plugins/jquery.vide.min.js

Answer 1

我有同样的问题（Chrome 54.0.2840.99 m），但我发现它至少可以在隐身会话中工作。

Chrome 开发工具似乎不尊重视频的“禁用缓存”设置。

Answer 2

Mozilla FireFox 中也存在同样的问题。 您可以使用 FireFox 中的“私有窗口”来请求视频源。 或者在 Chrome 中隐身。

Answer 3

我使用了 MS Edge 版本 86.0.622.48（我使用的是 macOS Mojave），它运行得很好！发送给那些遇到 Chrome 和 Firefox 问题的人！

Answer 4

2021 年 Chrome 中仍然存在错误，即使禁用了缓存，而且似乎也不适用于隐身模式；确实在 Mozilla/Firefox 中正确反映

使用 Chrome 在 Lighthouse 中正确报告，因此似乎是 devtools 错误

Answer 5

此问题主要是由浏览器秘密保存文件的缓存版本引起的。然后，如果请求这些文件，浏览器会立即从缓存中显示它们，甚至不会在网络面板或请求中显示。您可以通过删除或清除所有浏览器历史记录来确认这一点，您将看到没有历史记录或缓存的清晰浏览器，始终在网络请求中显示这些文件。

您也可以尝试添加

//Example for Nginx:
location ~* \.(mp4|avi|mov)$ {
    add_header Cache-Control "no-store";
}

//Example for Apache:
<FilesMatch "\.(mp4|avi|mov)$">
    Header set Cache-Control "no-store"
</FilesMatch>

请注意缓存控制：

no-store

比

no-cache

更重要，因为无缓存将与服务器重新验证，同时仍保留缓存版本。