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 編輯器中] 靜音，然后重新導出/上傳靜音版本以查看是否有所不同。

祝你好運！