我刚刚使用 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
}
最佳答案
如果您的视频有声音，这将导致加载延迟。根据 apple developer release notes for Safari 10 , “.. 没有音轨或禁用音轨的视频可以在网页加载时自动播放”。在 caniuse.com 上还添加了注释自动播放功能仅适用于无声视频。
您可以尝试将 muted 属性放在视频代码中的 autoplay 之前，或者将视频的音轨静音 [在vid editor]，然后重新导出/上传无声版本，看看这是否有所作为。
祝你好运!
关于html - iOS Safari 在播放前下载整个 MP4 视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59353472/