CODEWITHSUNDEEP
videomobilehtml5-video
matt
matt

Reputation: 44293

Possible reasons for iOS video playback not working

after looking for hours and finding that encoding and playsinline is a good starting point to look I still couldn't figure out on my current project why html5 video on iOS won't play back.

<video class="loop_video desktop_video" width="100%" height="100%" loop="" muted="" playsinline="" data-play="yes">
        <source src="https://myweb.com/wp-content/uploads/2020/06/p-video.mp4" type="video/mp4">
        <source src="https://myweb.co/wp-content/uploads/2020/06/p-video.webm" type="video/webm">
        <source src="https://myweb.co/wp-content/uploads/2020/06/p-video.ogv" type="video/ogv">
</video>

This plays back in all browsers on Desktop devices, but somehow always leaves a blank white space on mobile (iOS Chrome). The video container is there (meaning the size of the section seems to be rendered, but the video element itself is simply a white space.

What could possible reasons for this be so I can investigate further, any ideas?

Thanks, Matt

Upvotes: 0

Views: 33

Answers (1)

matt
matt

Reputation: 44293

I was able to fix this. It was an encoding issue of the webm, ogv and mp4 format in the end. I used an online converter tool and tried again, this time it works.

Upvotes: 1

Related Questions