From 481d35966fe49e9a5d3442b658e35403e9464322 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 7 Feb 2018 10:01:37 +0100 Subject: [PATCH] Fix video play on google chrome --- .../assets/player/peertube-videojs-plugin.ts | 20 +++++++++---------- client/src/assets/player/video-renderer.ts | 6 ------ 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index 5ccfdce36..125ef64a4 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -217,10 +217,15 @@ class PeerTubePlugin extends Plugin { private playerElement: HTMLVideoElement private videoFiles: VideoFile[] private torrent: WebTorrent.Torrent + private autoplay = false constructor (player: videojs.Player, options: PeertubePluginOptions) { super(player, options) + // Fix canplay event on google chrome by disabling default videojs autoplay + this.autoplay = this.player.options_.autoplay + this.player.options_.autoplay = false + this.videoFiles = options.videoFiles // Hack to "simulate" src link in video.js >= 6 @@ -281,6 +286,7 @@ class PeerTubePlugin extends Plugin { this.renderer = renderer if (!this.player.paused()) this.player.play().then(done) + else done() }) }) @@ -349,18 +355,12 @@ class PeerTubePlugin extends Plugin { const webTorrentButton = new WebTorrentButton(this.player) controlBar.webTorrent = controlBar.el().insertBefore(webTorrentButton.el(), controlBar.progressControl.el()) - if (this.player.options_.autoplay === true) { - this.updateVideoFile() + if (this.autoplay === true) { + this.updateVideoFile(undefined, () => this.player.play()) } else { this.player.one('play', () => { - // On firefox, we need to wait to load the video before playing - if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) { - this.player.pause() - this.updateVideoFile(undefined, () => this.player.play()) - return - } - - this.updateVideoFile(undefined) + this.player.pause() + this.updateVideoFile(undefined, () => this.player.play()) }) } } diff --git a/client/src/assets/player/video-renderer.ts b/client/src/assets/player/video-renderer.ts index 8baa42533..3cd98242d 100644 --- a/client/src/assets/player/video-renderer.ts +++ b/client/src/assets/player/video-renderer.ts @@ -43,7 +43,6 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca prepareElem() preparedElem.addEventListener('error', fallbackToMediaSource) preparedElem.addEventListener('loadstart', onLoadStart) - preparedElem.addEventListener('canplay', onCanPlay) return videostream(file, preparedElem) } @@ -51,7 +50,6 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca prepareElem() preparedElem.addEventListener('error', callback) preparedElem.addEventListener('loadstart', onLoadStart) - preparedElem.addEventListener('canplay', onCanPlay) const wrapper = new MediaElementWrapper(preparedElem) const writable = wrapper.createWriteStream(getCodec(file.name)) @@ -64,7 +62,6 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca function fallbackToMediaSource () { preparedElem.removeEventListener('error', fallbackToMediaSource) - preparedElem.removeEventListener('canplay', onCanPlay) useMediaSource() } @@ -82,10 +79,7 @@ function renderMedia (file, elem: HTMLVideoElement, opts: RenderMediaOptions, ca function onLoadStart () { preparedElem.removeEventListener('loadstart', onLoadStart) if (opts.autoplay) preparedElem.play() - } - function onCanPlay () { - preparedElem.removeEventListener('canplay', onCanPlay) callback(null, renderer) } }