HTML Video element, not working after iosSafari15 update

hi,

after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly.

all i can see is white blank background instead of background video. it looks like video cannot be loaded or played.

html:

<video playsinline
      autoplay
      muted
      loop
      class="uvodna__bg-video"
>
    <source src="/wp-content/themes/imtsmile2021/video/bg-video.mp4" type="video/mp4" />
</video>

can you recommend me some tips to fix that issue? thank you

Post not yet marked as solved Up vote post of BartyP Down vote post of BartyP
32k views
Posted by
BartyP
Reply

  • Same issue here. Any news?

    —
    danilocjr

  • I'm also noticing this issue. Applying the background color can get the first frame of the video to show, but I can't influence the playing otherwise.

    —
    jfjf

  • Also experiencing this issue. Any word on when/if it will be fixed?

    —
    bronan99

Replies

Same here, seems like iOS 15 has broken the <video> element, except for me, it is also broken on Chrome on iOS.

Also some extra info, if you apply a background: white; style (or any non-transparent colour, or image) to the <video> element, it will then be able to render the first frame of the video instead of showing nothing. In some cases it will continue to render the following frames only when the user is dragging their finger on the video element. As soon as the page stops moving, the video will freeze again.

Definitely seems like an iOS 15 bug to me.

Posted by
smorgg
Post not yet marked as solved Up vote reply of smorgg Down vote reply of smorgg
Add a Comment

I have had a similar problem. I suggest you check your CSS, in my case, passing a video from fixed to absolute position has corrected the problem.

Posted by
enekodev
Up vote reply of enekodev Down vote reply of enekodev
Add a Comment

I am noticing the same behavior on Mac OS (desktop) Safari 15. I can get the first frame of the video to show up if a background color is set on the element.

The video will not autoplay (despite having the correct attributes), but I did notice an unusual behavior: I can "scrub" the video by resizing the viewport (either resizing the window or resizing the web inspector drawer).

Posted by
jfjf
Up vote reply of jfjf Down vote reply of jfjf
Add a Comment

Same Problem here. Seems other People have the same Problem:

https://stackoverflow.com/questions/69554317/safari-15-0-video-element-position-fixed-not-working-on-page-load

https://stackoverflow.com/questions/69264516/safari-ios-15-video-issue

The only fixes i found so far:

  • add Position fixed via JS after Page load
  • reassign the src of the video tag via JS after Page load

Both solutions feel very dirty/hacky.

Any News? Apple that can't be. All other modern Browsers don't have that problem...

Posted by
leonleonleon
Post not yet marked as solved Up vote reply of leonleonleon Down vote reply of leonleonleon
Add a Comment

Same issue here are well, but am curious if this bug is only on videos with transparent backgrounds? I have a few videos on my site, but only getting this bug on the one with the transparent background. Considering the above hack is to add a background color to the video element, I wonder if theres any relation there.

Posted by
lwarddev
Up vote reply of lwarddev Down vote reply of lwarddev
Add a Comment

I have the same issue. I can't get the tag to work on Safari Desktop, despite having no issues with every other browser. Workarounds here shouldn't be necessary. Apple need to provide a solution. The Apple documentation says that the video html tags work in Safari.

Posted by
Ianos
Post not yet marked as solved Up vote reply of Ianos Down vote reply of Ianos
Add a Comment

Same issue here.

The <video> poster attribute is not showing since iOS 15.

Other 'hacks' mentioned here with CSS are no good for HLS video sources to 'display the first frame' before requesting playback.

Posted by
Kosso
Up vote reply of Kosso Down vote reply of Kosso
Add a Comment

Wow Apple keeps disappointing with this browser - so many bugs constantly reported.

I have found a work-around that works on my Macbook (haven't tested mobile Safari). With the same framerate as the video I update video.style.willChange alternating between "" and "transform". It's possibly a performance killer, so make sure you stop this with an intersection observer etc.

Posted by
ILTP
Up vote reply of ILTP Down vote reply of ILTP

  • Is there any update on this or has somebody found a fix for this? I have been facing this issue as well since the latest iOS update. I am using HTML Canvas element as the video source to publish the video. All I have been getting is a black screen and sometimes the first frame loads but ends up with a black screen.

    —
    Manipal
Add a Comment

No solution till yet, I'm also facing the same issue.

Posted by
lastnamearya
Up vote reply of lastnamearya Down vote reply of lastnamearya
Add a Comment

Same issue.

Posted by
youngbloodk
Up vote reply of youngbloodk Down vote reply of youngbloodk
Add a Comment

try playsinline attribute on video element. it worked for me on safari v15.4

Posted by
bharatmalhotra84
Post not yet marked as solved Up vote reply of bharatmalhotra84 Down vote reply of bharatmalhotra84

  • This suggestion has fixed the issue I have encountered

    —
    FrankC95

  • This suggestion has fixed the issue I have encountered(2)

    —
    mahinnz
Add a Comment

I figured it out, you need to have all three of these elements on a video: playsinline, autoPlay and muted. Otherwise, your auto-play won't work. You can still call video.play() after the user interacted with the site, if the autoplay is declared on the video element.

Posted by
DanielBalogh
Post not yet marked as solved Up vote reply of DanielBalogh Down vote reply of DanielBalogh

  • Obviously BartyP has playsinline, autoplay, muted in his/her video tag, and it doesn't work. It doesn't work for me either.

    —
    bhchoi

  • adding playsinline fixed my issue. previously had only autoPlay , muted and loop

    —
    mahinnz
Add a Comment

This issue started to occur with ios 15 and still I see no prospect of a solution from apple or anyone. It's so frustrating.

Posted by
bhchoi
Up vote reply of bhchoi Down vote reply of bhchoi
Add a Comment

Android VS IOS: Android wins on this case. Very disappointed with Apple.

Posted by
mousemahout
Up vote reply of mousemahout Down vote reply of mousemahout
Add a Comment

5 years in front-end developer, iOS is 90% of the bugs I encounter, and it's at least 2 years behind in major feature release (some may never see the light of day, like smooth-scroll behavior). Today I noticed I can't lazyload a video using a template tag for iOS 14 and under (autoplay won't work then - and iOS 14 is still used a lot). So I removed the template tag, but now the video first frame don't display well (white flickering while the video auto resize itself). I tried a lot of things, including some random tricks that did dome things (like the background:white, but I'm not there yet). It's in a standard horizontal media gallery, nothing fancy...

Glitches like that happen to me every other day, some of them you won't even believe how ridiculous and impossible they seem (acutally you might aha). So much frustration with this system, a real pain! Surely not what Steve jobs must have envisioned!

Posted by
MaxDesign
Post not yet marked as solved Up vote reply of MaxDesign Down vote reply of MaxDesign

  • Same here, 5 years working as a front-end developer and it's sad to see how outdated the iOS & Mac OS X software is when it comes to web development... you would say that a brand like Apple has a large team that deals with the latest techniques and possibilities, but I continue to be amazed at the amount of functions that they do not support :(

    —
    mikecollet
Add a Comment