html - iOS Safari 在播放前下载整个 MP4 视频?
问题描述
我刚刚使用 www.webpagetest.org 来测试我们的主页,它有一个自动播放 HTML5 9MB 全页背景视频:
<video autoplay muted loop playsinline id="Video1" >
<source src="default-resources/video/video-003.webm" type="video/webm">
<source src="default-resources/video/video-003.mp4" type="video/mp4">
</video>
在 Windows Chrome 上,它几乎可以直接加载并播放 WebM 视频。
然而,在 iOS Safari 上,加载需要 23 秒,因为它一直在等待整个 MP4 视频首先下载。
有没有人能从webpagetest.org的结果告诉我发生了什么?:
结果:
URL: http://www.example.com/pages/login/default-resources/video/video-003.mp4
Loaded By: http://www.example.com/pages/login/default.aspx?go=home:283
Host: www.example.com
IP: 107.180.1.23
Error/Status Code: 206
Priority: medium
Protocol: http/1.1
Request ID: 0.11
Discovered: 0.701 s
Request Start: 0.702 s
Time to First Byte: 52 ms
Content Download: 16298 ms
Bytes In (downloaded): 9474.4 KB
Uncompressed Size: 9474.1 KB
Bytes Out (uploaded): 0.6 KB
{
ip_addr: 107.180.1.23,
load_ms: 16350,
chunks: [
{
bytes: 19932,
ts: 807.6039999942
},
{
bytes: 28960,
ts: 859.0161249958
},
{
bytes: 34752,
ts: 913.5454166608
},
{
bytes: 31856,
ts: 966.4093749961
},
{
bytes: 31856,
ts: 1021.4770416642
},
{
bytes: 31856,
ts: 1072.6917916618
},
{
bytes: 31856,
ts: 1127.1292916645
},
...
etc (a lot)
...
{
bytes: 31856,
ts: 16715.3773333266
},
{
bytes: 34752,
ts: 16770.8284999972
},
{
bytes: 31856,
ts: 16822.8655416606
},
{
bytes: 33304,
ts: 16879.999416662
},
{
bytes: 31856,
ts: 16933.9182083277
},
{
bytes: 34752,
ts: 16989.8482916615
},
{
bytes: 34512,
ts: 17052.0970833313
}
],
protocol: http/1.1,
image_total: null,
minify_save: null,
score_cookies: -1,
score_compress: -1,
priority: medium,
type: 3,
dns_start: -1,
ssl_end: -1,
contentType: video/mp4,
gzip_save: null,
is_secure: 0,
server_count: null,
score_gzip: -1,
ssl_start: -1,
full_url: http://www.example.com/pages/login/default-resources/video/video-003.mp4,
headers: {
request: [
X-Playback-Session-Id: CA8529A7-1C86-4D21-AB25-F2CFB20B97EC,
Accept-Encoding: identity,
Connection: Keep-Alive,
Accept: */*,
User-Agent: Mozilla/5.0 (iPad; CPU OS 12_1_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16D57 PTST/191203.181223,
Range: bytes=65536-9767041,
Referer: http://www.example.com/pages/login/default.aspx?go=home
],
response: [
Content-Length: 9701506,
X-Powered-By: ASP.NET,
Accept-Ranges: bytes,
Server: Microsoft-IIS/8.5,
Last-Modified: Mon, 16 Dec 2019 09:19:23 GMT,
Content-Range: bytes 65536-9767041/9767042,
ETag: W/\805f84e7f1b3d51:0\,
Date: Mon, 16 Dec 2019 08:36:03 GMT,
Content-Type: video/mp4,
X-Powered-By-Plesk: PleskWin
]
},
dns_ms: -1,
connect_end: -1,
responseCode: 206,
ssl_ms: -1,
image_save: null,
bytesIn: 9701794,
initiator_line: 283,
bytesOut: 616,
minify_total: null,
id: 0.11,
dns_end: -1,
ttfb_ms: 52,
connect_start: -1,
score_cdn: -1,
cache_time: null,
objectSizeUncompressed: 9701506,
load_start: 702,
connect_ms: -1,
method: GET,
objectSize: 9701506,
gzip_total: null,
initiator_column: ,
request_id: 0.11,
score_combine: -1,
score_etags: -1,
host: www.example.com,
score_keep-alive: -1,
score_minify: -1,
initiator: http://www.example.com/pages/login/default.aspx?go=home,
socket: 1,
created: 701,
url: /pages/login/default-resources/video/video-003.mp4,
score_cache: -1,
server_rtt: null,
cdn_provider: null,
load_end: 17052,
ttfb_start: 702,
ttfb_end: 754,
download_start: 754,
download_end: 17052,
download_ms: 16298,
all_start: 702,
all_end: 17052,
all_ms: 16350,
index: 10,
number: 11
}
解决方案
如果您的视频有声音,这将导致加载延迟。根据Safari 10 的苹果开发人员发布说明,“.. 没有音轨或禁用音轨的视频可以在网页加载时自动播放”。caniuse.com上还添加了一条注释,说明自动播放功能仅适用于无声视频。
您可以尝试将muted
属性放在视频代码之前autoplay
,或者将视频的音轨静音 [在 vid 编辑器中],然后重新导出/上传静音版本,看看是否有区别。
祝你好运!
推荐阅读
- json - 删除/替换 Azure 逻辑应用中解析的 JSON 输出中的字符
- typo3 - 部署脚本无法生成 PackageStates.php,而相同的 Shell-Command 可以工作。(TYPO3)
- python-3.x - 通过 Python 连接到 Sharepoint - UrlLib 错误
- r - 按序列将向量拆分为组
- css - 旋转对象并从顶部对其进行缩放
- microsoft-graph-api - Microsoft 图形中的法语口音
- django - Django Rest Framework 中的序列化和权限
- python - “缺少 1 个必需的位置参数”和“意外关键字”
- batch-file - 尝试在 CMD 中的目录中删除文件夹但具有排除列表
- javascript - 无法打印出 json 中的属性