当我在用户点击按钮时，我正在编写一个显示叠加div的网页。 其中一个叠加div会在显示时自动播放视频，其他则只显示图片。以下是Jade代码的一部分。
div.overlay#video-content
div.video
video#vid-name(controls loop)
source(src="/video/video.mp4" type="video/mp4")
div.overlay#pic-content
div.pic-1
img.des(src="/images/picture-1.png")
在Google Developer Tool的“网络”页面中，它只显示HTML，CSS，JavaScript和图像文件的时间和文件大小。 虽然页面可以在显示div时播放视频，但开发人员工具不会显示浏览器加载视频文件的时间和时长。
我很想知道浏览器何时获取视频内容。我相信浏览器无法在不从服务器获取资源的情况下播放此视频。
P.S。我尝试使用ctrl + F5强制浏览器为每个资源请求服务器。
答案 0 :(得分：0)
如果您的服务器支持字节范围请求，那么浏览器通常会以“块”的形式请求视频。一旦有足够的信息开始，就开始播放。
标准MP4文件最后有元数据，这意味着视频无法启动，直到下载完所有块。
您可以修改MP4以将元数据移到前面以使用各种工具实现更好的流式传输 - 有关详细信息，请参阅此处，qt-faststart：
如果您想获得更好的用户体验，那么您可能希望使用支持自适应比特率流的专用视频流服务器 - 这会创建从低到高质量的视频的多个大小版本，并且浏览器请求下一个块最符合当前网络条件的大小文件。
如果您采用这种方式，那么您最好使用现有的视频流服务器，而不是尝试自己重新创建此功能。开源流媒体服务器的一个例子是：