From 9eccae74c844f09e9e3483db623fea00e0562365 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 19 Aug 2020 16:14:25 +0200 Subject: Try to fix autoplay with ios/safari * Disable autoplay on first load because we have weird issues (player starts to play and stop so we loose the big play button). We also don't want to autoplay muted videos (bad UX IMHO and we don't have ads to display) * Enable autoplay when we already played a video (fixes the issue with playlists) --- .../src/assets/player/peertube-player-manager.ts | 26 +++++++++++++++------- .../assets/player/webtorrent/webtorrent-plugin.ts | 7 +----- 2 files changed, 19 insertions(+), 14 deletions(-) (limited to 'client/src/assets/player') diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts index 15b2f420b..8e0a9109f 100644 --- a/client/src/assets/player/peertube-player-manager.ts +++ b/client/src/assets/player/peertube-player-manager.ts @@ -35,7 +35,7 @@ import { VideoJSPluginOptions } from './peertube-videojs-typings' import { TranslationsManager } from './translations-manager' -import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils' +import { buildVideoOrPlaylistEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isSafari, isIOS } from './utils' // Change 'Playback Rate' to 'Speed' (smaller for our settings menu) (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed' @@ -117,6 +117,8 @@ export class PeertubePlayerManager { private static playerElementClassName: string private static onPlayerChange: (player: videojs.Player) => void + private static alreadyPlayed = false + static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) { let p2pMediaLoader: any @@ -152,6 +154,10 @@ export class PeertubePlayerManager { alreadyFallback = true }) + player.one('play', () => { + PeertubePlayerManager.alreadyPlayed = true + }) + self.addContextMenu(mode, player, options.common.embedUrl) player.bezels() @@ -202,6 +208,7 @@ export class PeertubePlayerManager { p2pMediaLoaderModule?: any ): videojs.PlayerOptions { const commonOptions = options.common + const isHLS = mode === 'p2p-media-loader' let autoplay = this.getAutoPlayValue(commonOptions.autoplay) let html5 = {} @@ -227,7 +234,7 @@ export class PeertubePlayerManager { PeertubePlayerManager.addHotkeysOptions(plugins) } - if (mode === 'p2p-media-loader') { + if (isHLS) { const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule) html5 = hlsjs.html5 @@ -579,12 +586,15 @@ export class PeertubePlayerManager { private static getAutoPlayValue (autoplay: any) { if (autoplay !== true) return autoplay - // Giving up with iOS - if (isIOS()) return false - - // We have issues with autoplay and Safari. - // any that tries to play using auto mute seems to work - if (isSafari()) return 'any' + // We have issues with autoplay and Safari with webtorrent + if (isIOS()) { + // On first play, disable autoplay to avoid issues + // But if the player already played videos, we can safely autoplay next ones + return PeertubePlayerManager.alreadyPlayed ? 'play' : false + } else if (isSafari()) { + // Issues with Safari and webtorrent on first play + return PeertubePlayerManager.alreadyPlayed ? 'play' : false + } return 'play' } diff --git a/client/src/assets/player/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts index 5c8aca1f8..782c91cbd 100644 --- a/client/src/assets/player/webtorrent/webtorrent-plugin.ts +++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts @@ -74,7 +74,7 @@ class WebTorrentPlugin extends Plugin { this.startTime = timeToInt(options.startTime) // Disable auto play on iOS - this.autoplay = options.autoplay && isIOS() === false + this.autoplay = options.autoplay this.playerRefusedP2P = !getStoredP2PEnabled() this.videoFiles = options.videoFiles @@ -329,11 +329,6 @@ class WebTorrentPlugin extends Plugin { private tryToPlay (done?: (err?: Error) => void) { if (!done) done = function () { /* empty */ } - // Try in mute mode because we have issues with Safari - if (isSafari() && this.player.muted() === false) { - this.player.muted(true) - } - const playPromise = this.player.play() if (playPromise !== undefined) { return playPromise.then(() => done()) -- cgit v1.2.3