H5W3
当前位置:H5W3 > HTML5 > 正文

【前端】[前端]关于页面加载时video标签中视频数据请求问题

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video src="https://segmentfault.com/q/1.mp4" controls width="500px"></video>
</body>
</html>

如上代码,页面中有一个video标签,未设置视频的自动播放,在页面打开时该视频的请求如下:

【前端】[前端]关于页面加载时video标签中视频数据请求问题

可以看见会分出3个HTTP状态码为206的请求,此时点击播放,最底下的请求继续接收数据,直到视频全部加载,

假设最底下的请求是视频数据流,那么前两个请包含什么内容?有方法去掉或者压缩吗?


给video设置poster属性为其指定一个缩略图,在页面打开时仍旧是三个media请求,所以和缩略图应该没有关系。

回答

206 Partial Content

伺服器已經成功處理了部分GET請求。

像是續傳檔案或是影片串流這種每次只下載部分內容的請求,都會用 206 ,裡面通常都會包含一個Content-Range 來表示該段內容屬於哪部分區段。

所以少一個都不行,也沒有壓縮的必要。

  • 请求视频这类文件的时候因为响应会很大,如果全部下载下来再播放会等待很长时间,用户体验不好,所以服务器会允许浏览器使用range头来请求视频的某一部分,并设置以206的响应码进行响应,来使浏览器可以边播放边请求,优化用户体验。所以会出现状态码为206的响应。
  • 另一方面,浏览器只有在获取到视频的元信息(metadata)后才开始播放视频,而一般不经过优化的视频,其元数据信息存在视频文件末尾。所以会出现连续三个请求的情况:第一个请求是先从0字节找视频的元数据信息,没找到的话,会继续发起一个请求到视频末尾去找,等找到以后,又会重新开始一个请求从视频开头处开始请求,此时视频才开始播放。如果视频经过优化,元数据信息在视频开头,就只会有一个请求了,所以推荐使用HandBrake这类的工具对视频经过网络优化后再上传。详见从天猫某活动视频不必要的3次请求说起

本文地址:H5W3 » 【前端】[前端]关于页面加载时video标签中视频数据请求问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址