- observable.subscribe(
- res => {
- if (res === false) {
-
- return this.router.navigate([ '/videos/list' ])
- }
-
- // Player was already loaded
- if (this.videoPlayerLoaded !== true) {
- this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
-
- // If autoplay is true, we don't really need a poster
- if (this.isAutoplay() === false) {
- this.playerElement.poster = this.video.previewUrl
- }
-
- const videojsOptions = {
- controls: true,
- autoplay: this.isAutoplay(),
- plugins: {
- peertube: {
- videoFiles: this.video.files,
- playerElement: this.playerElement,
- peerTubeLink: false
- },
- hotkeys: {}
- }
- }
+ // Flush old player if needed
+ this.flushPlayer()
+
+ // Build video element, because videojs remove it on dispose
+ 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 playerCaptions = videoCaptions.map(c => ({
+ label: c.language.label,
+ language: c.language.id,
+ src: environment.apiUrl + c.captionPath
+ }))
+
+ const videojsOptions = getVideojsOptions({
+ autoplay: this.isAutoplay(),
+ inactivityTimeout: 2500,
+ videoFiles: this.video.files,
+ videoCaptions: playerCaptions,
+ playerElement: this.playerElement,
+ videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
+ videoDuration: this.video.duration,
+ enableHotkeys: true,
+ peertubeLink: false,
+ poster: this.video.previewUrl,
+ startTime,
+ theaterMode: true,
+ language: this.localeId
+ })