Starting with iOS14, Apple is forcing really hard so that all
Even though Plyr is an ultra-super-great player it got affected by this in iOS14 too. Since iOS14 Plyr too replaces specific video poster images with the 1st frame of the video, unless you set EITHER playsinline (which ruins the ability to use iOS native playback for fullscreen playback on iOS devices) OR preload="none" (which ruins the the advantage of preloading of the video) within the
The following code is the official Plyr demo code with just one video and one poster (everything else removed). It displays the video poster in iOS14+ Safari only if you add either playsinline or preload="none" inside
I think I found a bug why the code above does't display the poster. For some reason once you add captions track the video poster starts appearing in IOS14 even without preload none or playsinline. The following code displays the poster without playsinline OR preload="none" perfectly fine in iOS14:
Just any captions even empty source captions above would do the trick. I think that the captions being included will trigger css that displays the Plyr player layers over the iOS native player.
Hope that helps someone, it might be a small bug to fix ...
magic-thomas
commented
1 year ago
Starting with iOS14, Apple is forcing really hard so that all
Even though Plyr is an ultra-super-great player it got affected by this in iOS14 too. Since iOS14 Plyr too replaces specific video poster images with the 1st frame of the video, unless you set EITHER playsinline (which ruins the ability to use iOS native playback for fullscreen playback on iOS devices) OR preload="none" (which ruins the the advantage of preloading of the video) within the
The following code is the official Plyr demo code with just one video and one poster (everything else removed). It displays the video poster in iOS14+ Safari only if you add either playsinline or preload="none" inside
`<video controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"
I think I found a bug why the code above does't display the poster. For some reason once you add captions track the video poster starts appearing in IOS14 even without preload none or playsinline. The following code displays the poster without playsinline OR preload="none" perfectly fine in iOS14:
`<video controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player"
Just any captions even empty source captions above would do the trick. I think that the captions being included will trigger css that displays the Plyr player layers over the iOS native player.
Hope that helps someone, it might be a small bug to fix ...