Fix video play on google chrome

diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts
index 5ccfdce36b8ad127dac80119206a6bff6bcee690..125ef64a4663d8db8f620dc1c031c2490a13c9d2 100644 (file)
--- 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 8baa425330c36399ac78a0a76e3fee8cb54ba888..3cd98242d965727a1757f9c5828bcd97a4d9e57d 100644 (file)
--- 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)
   }
 }