Better skin for videojs

2 files changed, 10 insertions, 3 deletions

diff --git a/client/src/app/videos/video-watch/video-watch.component.html b/client/src/app/videos/video-watch/video-watch.component.html
index 62f27ba48..58a48ca9c 100644
--- a/client/src/app/videos/video-watch/video-watch.component.html
+++ b/client/src/app/videos/video-watch/video-watch.component.html
@@ -16,7 +16,7 @@
 <div class="row">
   <!-- We need the video container for videojs so we just hide it -->
   <div [hidden]="videoNotFound" class="embed-responsive embed-responsive-19by9">
-     <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"></video>
+     <video id="video-container" class="video-js vjs-sublime-skin"></video>
   </div>
 
   <div *ngIf="videoNotFound" id="video-not-found">Video not found :'(</div>
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 34dbc9a88..1284aa033 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -74,7 +74,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     const videojsOptions = {
       controls: true,
-      autoplay: false
+      autoplay: true
     }
 
     const self = this
@@ -127,11 +127,18 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.loading = false
 
       console.log('Added ' + this.video.magnetUri + '.')
-      torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
+      torrent.files[0].renderTo(this.playerElement, (err) => {
         if (err) {
           this.notificationsService.error('Error', 'Cannot append the file in the video element.')
           console.error(err)
         }
+
+        // Hack to "simulate" src link in video.js >= 6
+        // If no, we can't play the video after pausing it
+        // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
+        (this.player as any).src = () => true
+
+        this.player.play()
       })
 
       this.runInProgress(torrent)