iOS Safari downloading whole MP4 video before playing?

I just used www.webpagetest.org to test our homepage which has an autoplay HTML5 9MB fullpage background video:

 <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>

On Windows Chrome it loads pretty much straight way and plays the WebM video.

However on iOS Safari it has been taking 23 seconds to load as it has been waiting for the entire MP4 video to download first.

Is anyone able to tell me from the webpagetest.org results what's happening?:

Results:

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
}

Solution

If your video has sound, this will cause a delay in loading. As per the apple developer release notes for Safari 10, ".. videos without audio tracks or with disabled audio tracks can play automatically when the webpage loads". A note is also added on caniuse.com that the autoplay feature is only available to non-audible videos.

You could try putting the muted attribute before the autoplay in your video code, or muting the audio track of your video [in a vid editor] and then re-export/upload a silent version to see if that makes a difference.

Good luck!