Some player fixes on Android, Safari and iOS

2 files changed, 8 insertions, 3 deletions

diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index f52ec75f4..7e5a3ebb6 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -1,7 +1,7 @@
 import debug from 'debug'
 import videojs from 'video.js'
 import { logger } from '@root-helpers/logger'
-import { isIOS, isMobile } from '@root-helpers/web-browser'
+import { isIOS, isMobile, isSafari } from '@root-helpers/web-browser'
 import { timeToInt } from '@shared/core-utils'
 import { VideoView, VideoViewEvent } from '@shared/models/videos'
 import {
@@ -63,8 +63,10 @@ class PeerTubePlugin extends Plugin {
 
       this.player.removeClass('vjs-has-autoplay')
 
-      // Fix a bug on iOS where the big play button is not displayed when autoplay fails
-      if (isIOS()) this.player.hasStarted(false)
+      this.player.poster(options.poster())
+
+      // Fix a bug on iOS/Safari where the big play button is not displayed when autoplay fails
+      if (isIOS() || isSafari()) this.player.hasStarted(false)
     })
 
     this.player.on('ratechange', () => {
diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts
index 80e56795b..930b5045a 100644
--- a/client/src/assets/player/shared/web-video/web-video-plugin.ts
+++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts
@@ -77,6 +77,9 @@ class WebVideoPlugin extends Plugin {
 
     const oldAutoplayValue = this.player.autoplay()
     if (options.isUserResolutionChange) {
+      // Prevent video source element displaying the poster when we change the resolution
+      (this.player.el() as HTMLVideoElement).poster = ''
+
       this.player.autoplay(false)
       this.player.addClass('vjs-updating-resolution')
     }