Bug 271828 – Webpage background video fails to load

• Status: NEW
• Component: Media

[Zack Weaver]

Created attachment 470636 [details]
Email correspondence with Google's bug reporting team

Upon upgrading the software on my iPhone 12 the background video on my webpage (https://fullarmorfilms.com/) fails to load on mobile browsers for Safari and Chrome. It just reverts to the mobile fallback image. This happens on both Safari and Chrome and both are up to date. The issue does not always occur on other peoples Android or iPhone mobile devices, and it doesn't occur if people haven't updated their software. I reported the bug to Google's bug reporter and after examining it, Google believes it is a WebKit bug. Their correspondence is attached.

[Karl Dubost]

Created attachment 470656 [details]
rendering on safari simulator

So this is working for me on iPhone 15 Pro Simulator the background video is working.

I will try on a real device.

[Karl Dubost]

but indeed on a real iPhone 13 Pro with iOS 17.4.1 (21E236) I get the still image.

the HTML is very verbose. This is impressive.

```
<div data-controller="VideoBackgroundNative"
     data-controllers-bound="VideoBackgroundNative">
  <div class="sqs-video-background-native content-fill"
       data-config-native-video="{
&quot;id&quot;: &quot;63ced51f31372c3054905385&quot;,
&quot;recordType&quot;: 61,
&quot;addedOn&quot;: 1674499359580,
&quot;updatedOn&quot;: 1674499359580,
&quot;authorId&quot;: &quot;55b7a5b7e4b0ff9349ec9834&quot;,
&quot;systemDataId&quot;: &quot;dfc6b374-b9c0-40b5-a748-bca96ae83162&quot;,
&quot;systemDataVariants&quot;: &quot;1920:1080,640:360&quot;,
&quot;systemDataSourceType&quot;: &quot;mp4&quot;,
&quot;filename&quot;: &quot;FullArmor.59.mp4&quot;,
&quot;body&quot;: null,
&quot;likeCount&quot;: 0,
&quot;commentCount&quot;: 0,
&quot;publicCommentCount&quot;: 0,
&quot;commentState&quot;: 1,
&quot;author&quot;: {
&quot;id&quot;: &quot;55b7a5b7e4b0ff9349ec9834&quot;,
&quot;displayName&quot;: &quot;Nathan Johnson&quot;,
&quot;firstName&quot;: &quot;Nathan&quot;,
&quot;lastName&quot;: &quot;Johnson&quot;,
&quot;avatarUrl&quot;: &quot;https://static1.squarespace.com/static/images/6331cfd4341aef2faa06523e&quot;,
&quot;bio&quot;: &quot;&quot;,
&quot;avatarAssetUrl&quot;: &quot;https://static1.squarespace.com/static/images/6331cfd4341aef2faa06523e&quot;
},
&quot;contentType&quot;: &quot;video/mp4&quot;,
&quot;structuredContent&quot;: {
&quot;_type&quot;: &quot;SqspHostedVideo&quot;,
&quot;videoCodec&quot;: &quot;h264&quot;,
&quot;audioCodec&quot;: &quot;aac&quot;,
&quot;alexandriaUrl&quot;: &quot;https://video.squarespace-cdn.com/content/v1/6376cc4a0832510a2d2e38ee/dfc6b374-b9c0-40b5-a748-bca96ae83162/{variant}&quot;,
&quot;alexandriaLibraryId&quot;: &quot;6376cc4a0832510a2d2e38ee&quot;,
&quot;aspectRatio&quot;: 1.7777777777777777,
&quot;durationSeconds&quot;: 60.06
},
&quot;videoCodec&quot;: &quot;h264&quot;,
&quot;audioCodec&quot;: &quot;aac&quot;,
&quot;alexandriaUrl&quot;: &quot;https://video.squarespace-cdn.com/content/v1/6376cc4a0832510a2d2e38ee/dfc6b374-b9c0-40b5-a748-bca96ae83162/{variant}&quot;,
&quot;alexandriaLibraryId&quot;: &quot;6376cc4a0832510a2d2e38ee&quot;,
&quot;aspectRatio&quot;: 1.7777777777777777,
&quot;durationSeconds&quot;: 60.06,
&quot;items&quot;: [ ],
&quot;pushedServices&quot;: { },
&quot;pendingPushedServices&quot;: { },
&quot;usageId&quot;: &quot;d83cff11-d310-30d5-b258-fd4613d7d800&quot;,
&quot;assetProtectionLevel&quot;: &quot;LIBRARY&quot;,
&quot;originalSize&quot;: &quot;1920:1080&quot;,
&quot;recordTypeLabel&quot;: &quot;sqsp-hosted-video&quot;
}"
       data-config-playback-speed="0.9"
       data-config-filter="1"
       data-config-filter-strength="0">

    <img data-src="https://images.squarespace-cdn.com/content/v1/6376cc4a0832510a2d2e38ee/91311031-95e6-4d44-82b2-44f8442c4b1f/Screenshot+2023-04-03+at+3.47.57+PM.png"
         data-image="https://images.squarespace-cdn.com/content/v1/6376cc4a0832510a2d2e38ee/91311031-95e6-4d44-82b2-44f8442c4b1f/Screenshot+2023-04-03+at+3.47.57+PM.png"
         data-image-dimensions="3100x1690"
         data-image-focal-point="0.5,0.5"
         alt="Screenshot 2023-04-03 at 3.47.57 PM.png"
         class="sqs-video-background-native__fallback-image"
         elementtiming="nbf-video-background-native-fallback"
         data-parent-ratio="0.5"
         data-image-resolution="2500w"
         src="https://images.squarespace-cdn.com/content/v1/6376cc4a0832510a2d2e38ee/91311031-95e6-4d44-82b2-44f8442c4b1f/Screenshot+2023-04-03+at+3.47.57+PM.png?format=2500w"
         style="width: 100%; height: 100%; object-position: 50% 50%; object-fit: cover;">


    <div class="sqs-video-background-native__video-player video-player">
      <div tabindex="0"
           class="plyr plyr--full-ui plyr--video plyr--html5 plyr--paused plyr--stopped plyr--airplay-supported plyr--is-ios plyr--is-touch">
        <div class="plyr__controls"
             style=""></div>
        <div class="plyr__video-wrapper"><video playsinline=""
                 webkit-playsinline=""
                 loop=""
                 muted=""
                 autoplay="">
            <source src="blob:https://fullarmorfilms.com/7fdbdbeb-f2a0-45e1-940b-d152c6c682bd"
                    type="application/x-mpegURL">
          </video>
          <div class="plyr__poster"></div>
        </div>
        <div class="plyr__captions"></div>
        <div class="video-player__error">
          <p class="video-player__error-message">Video unavailable. Try playing something else.</p>
        </div>
      </div>
    </div>
  </div>

</div>
```

[Karl Dubost]

The relevant part is 

<video playsinline=""
                 webkit-playsinline=""
                 loop=""
                 muted=""
                 autoplay="">
            <source src="blob:https://fullarmorfilms.com/7fdbdbeb-f2a0-45e1-940b-d152c6c682bd"
                    type="application/x-mpegURL">
          </video>




In the console I get (after waiting for a long while.)

[Error] VideoPlayerError: Media failed to decode
construct
r — 7433.509e41b74fe5cca373eb.js:2:2256
construct
(anonymous function) — 7433.509e41b74fe5cca373eb.js:2:2797
i — 7433.509e41b74fe5cca373eb.js:2:2962
value — 7433.509e41b74fe5cca373eb.js:2:3292
(anonymous function) — 7433.509e41b74fe5cca373eb.js:2:371439
dispatchEvent
Te — 7433.509e41b74fe5cca373eb.js:2:525886
(anonymous function) — 7433.509e41b74fe5cca373eb.js:2:577307

	(anonymous function) (7433.509e41b74fe5cca373eb.js:2:371512)
	dispatchEvent
	Te (7433.509e41b74fe5cca373eb.js:2:525886)
	(anonymous function) (7433.509e41b74fe5cca373eb.js:2:577307)



I wonder if it's related to https://github.com/videojs/video.js/issues/8345
replay broken on ios 16 safari with application/x-mpegURL #8345


which should have been fixed by Bug 251119
But this is not working on iOS 17.4.1, I wonder if it has been released yet on Safari/iOS as it definitely works on macOS.

[Radar WebKit Bug Importer]

<rdar://problem/125595067>

[Karl Dubost]

This is also tracked internally by radar 125197234

[Zack Weaver]

Good afternoon, this issue is happening again (to recap: "If I pull up my website on my iPhone in Chrome it doesn't autoplay the video, it just resorts to the mobile fallback image." It is also happening on Safari.) I still have the same model of iPhone as before (iPhone 12 Pro #MGJR3LL/A) and I'm using iOS 17.5.1.

[Zack Weaver]

This is happening again. Recap: "If I pull up my website on my iPhone in Chrome it doesn't autoplay the video, it just resorts to the mobile fallback image." It is also happening on Safari.) I still have the same model of iPhone as before (iPhone 12 Pro #MGJR3LL/A) and I noticed it last night. I am using iOS 17.6.1 (unlike my message from July)

(In reply to Zack Weaver from comment #6)
> Good afternoon, this issue is happening again (to recap: "If I pull up my
> website on my iPhone in Chrome it doesn't autoplay the video, it just
> resorts to the mobile fallback image." It is also happening on Safari.) I
> still have the same model of iPhone as before (iPhone 12 Pro #MGJR3LL/A) and
> I'm using iOS 17.5.1.