iOS Safari 在播放前下载整个 MP4 视频？

Question

我刚刚使用 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
}

Answer 1

如果您的视频有声音，这将导致加载延迟。 根据Safari 10的苹果开发者发布说明，“.. 没有音轨或禁用音轨的视频可以在网页加载时自动播放”。 caniuse.com上还添加了一条说明，即自动播放功能仅适用于非可听视频。

您可以尝试将muted属性放在视频代码中的autoplay之前，或者将视频的音轨 [在 vid 编辑器中] 静音，然后重新导出/上传静音版本以查看是否有所不同。

祝你好运！