From e7eb5b399725afe7bae2dac27235a6e9478a2f12 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 22 May 2018 09:16:05 +0200 Subject: Fix play on iOS (grumph) --- .../app/videos/+video-watch/video-watch.component.ts | 1 + client/src/assets/player/peertube-videojs-plugin.ts | 20 ++++++++++++++++---- client/src/environments/environment.hmr.ts | 2 +- client/src/standalone/videos/embed.html | 2 +- 4 files changed, 19 insertions(+), 6 deletions(-) (limited to 'client/src') diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 127ae919d..35a7c04cc 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -340,6 +340,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy { const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper') this.playerElement = document.createElement('video') this.playerElement.className = 'video-js vjs-peertube-skin' + this.playerElement.setAttribute('playsinline', 'true') playerElementWrapper.appendChild(this.playerElement) const videojsOptions = getVideojsOptions({ diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index ac04421a7..5789641fe 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -63,7 +63,8 @@ class PeerTubePlugin extends Plugin { constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) - this.autoplay = options.autoplay + // Disable auto play on iOS + this.autoplay = options.autoplay && this.isIOS() === false this.startTime = options.startTime this.videoFiles = options.videoFiles @@ -180,6 +181,7 @@ class PeerTubePlugin extends Plugin { oldTorrent.removePeer(oldTorrent['ws']) } + // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution) this.addTorrentDelay = setTimeout(() => { this.flushVideoFile(previousVideoFile) @@ -337,6 +339,12 @@ class PeerTubePlugin extends Plugin { this.tryToPlay() }) } else { + // Don't try on iOS that does not support MediaSource + if (this.isIOS()) { + this.currentVideoFile = this.videoFiles[0] + return this.fallbackToHttp(undefined, false) + } + // Proxy first play const oldPlay = this.player.play.bind(this.player) this.player.play = () => { @@ -439,7 +447,7 @@ class PeerTubePlugin extends Plugin { return fetch(this.videoViewUrl, { method: 'POST' }) } - private fallbackToHttp (done: Function) { + private fallbackToHttp (done?: Function, play = true) { this.flushVideoFile(this.currentVideoFile, true) this.torrent = null @@ -449,9 +457,9 @@ class PeerTubePlugin extends Plugin { const httpUrl = this.currentVideoFile.fileUrl this.player.src = this.savePlayerSrcFunction this.player.src(httpUrl) - this.player.play() + if (play) this.tryToPlay() - return done() + if (done) return done() } private handleError (err: Error | string) { @@ -466,6 +474,10 @@ class PeerTubePlugin extends Plugin { this.player.removeClass('vjs-error-display-enabled') } + private isIOS () { + return !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform) + } + private alterInactivity () { let saveInactivityTimeout: number diff --git a/client/src/environments/environment.hmr.ts b/client/src/environments/environment.hmr.ts index 20e2b8fcd..78cc8a992 100644 --- a/client/src/environments/environment.hmr.ts +++ b/client/src/environments/environment.hmr.ts @@ -1,5 +1,5 @@ export const environment = { production: false, hmr: true, - apiUrl: 'http://localhost:9000' + apiUrl: 'http://192.168.1.42:9000' } diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html index b60b03a22..2d1b48b38 100644 --- a/client/src/standalone/videos/embed.html +++ b/client/src/standalone/videos/embed.html @@ -17,7 +17,7 @@
-