Hi,
I'm a freelance web developer working with Volvo Cars in Sweden. I think that we may have encountered this bug (HTML5 video not able to play mp4 video at all). What is most troubling is that there are some visitors who can replicate the bug without fail, but I myself have been unable to replicate it myself with my Apple devices, or via BrowserStack, or even random iPhones on display in shops in Colchester (you cannot imagine how frustrating it is to not be able to replicate this bug in person), so I have relied on colleagues within Volvo who have managed to replicate the bug to perform a range of debugging tests for me.
If you visit this url for the EX30's interior design sub-page here: https://www.volvocars.com/uk/cars/ex30-electric/interior-design/
And you scroll down to the section titled "Will it fit?", in the screenshot here:
Where you can see the back of the car open with a Stroller next to it, clicking on the white hotspot button should trigger the playback of the video animation which is the stroller being folded up and going into the back of the car, and then the dimensions of the car are shown upon the next click of the white hotspot button.
If the video plays, in a way that's good but that means that the bug isn't occurring for you. If however the video doesn't play, then this is the bug.
In order to get as much debugging data as possible, I have written code that prints out to the console all of the events that can be triggered on the video element. If you view the console log of the page on your device via Safari's Developer Tools, you will see that the log shows the events that are emitted in the console tab.
Attached is an example of these logs on that page from iOS Simulator running an iPhone 15 Pro Max with iOS 17.4:
One thing I observed was that on Safari on iOS, the video does not seem to download data upon page load, even if the video element has a preload="auto" hint in the attributes.
I then assumed that the canplay and canplaythrough events would trigger upon the clicking of the hotspot button, but we found that they don't get emitted at all, as per this screenshot:
There doesn't seem to be any error event emitted on the video element, and the network requests show a 206 partial content fetch as Safari does for video assets.
I even went to the lengths of checking the SHA256 hash of the video asset body content to ensure that no byte-fiddling was occurring.
If you have any tips for getting at detailed diagnostic data like logs of what Safari is doing behind the scenes for a page (and I don't mean the DevTools, I mean something that can shed light on specifically why the canplay and canplaythrough events do not trigger on the video.
I even checked if the video was the issue by linking to it from an internal test page, and we found that it worked fine on a mobile device that was able to replicate the issue on the live site.
Any pointers you can offer would be helpful. I have narrowed down the issue to this point, but I do not yet know the root cause, and it is driving me nuts.
