diff --git a/src/index.html b/src/index.html index dece9ec5d..a13c34edd 100755 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,6 @@
- \ No newline at end of file diff --git a/src/routes/Player/Video/stremio-video/YouTubeVideo.js b/src/routes/Player/Video/stremio-video/YouTubeVideo.js index 0035cb386..dace7dc0d 100644 --- a/src/routes/Player/Video/stremio-video/YouTubeVideo.js +++ b/src/routes/Player/Video/stremio-video/YouTubeVideo.js @@ -23,45 +23,21 @@ function YouTubeVideo(containerElement) { var volumeChangedIntervalId = window.setInterval(onVolumeChangedInterval, 100); var subtitles = new HTMLSubtitles(containerElement); var video = null; - // TODO handle script element + var scriptElement = document.createElement('script'); var stylesElement = document.createElement('style'); var videoContainer = document.createElement('div'); - subtitles.addListener('error', onSubtitlesError); - subtitles.addListener('load', updateSubtitleText); + scriptElement.type = 'text/javascript'; + scriptElement.src = 'https://www.youtube.com/iframe_api'; + scriptElement.onload = onYouTubePlayerApiLoaded; + scriptElement.onerror = onYouTubePlayerApiError; + containerElement.appendChild(scriptElement); containerElement.appendChild(stylesElement); stylesElement.sheet.insertRule('#' + containerElement.id + ' .video { position: absolute; width: 100%; height: 100%; z-index: -1; }', stylesElement.sheet.cssRules.length); containerElement.appendChild(videoContainer); videoContainer.classList.add('video'); - - YT.ready(() => { - if (destroyed) { - return; - } - - video = new YT.Player(videoContainer, { - height: '100%', - width: '100%', - playerVars: { - autoplay: 1, - cc_load_policy: 3, - controls: 0, - disablekb: 1, - enablejsapi: 1, - fs: 0, - iv_load_policy: 3, - loop: 0, - modestbranding: 1, - playsinline: 1, - rel: 0 - }, - events: { - onError: onVideoError, - onReady: onVideoReady, - onStateChange: onVideoStateChange - } - }); - }); + subtitles.addListener('error', onSubtitlesError); + subtitles.addListener('load', updateSubtitleText); function getPaused() { if (!loaded) { @@ -192,6 +168,52 @@ function YouTubeVideo(containerElement) { critical: false }); } + function onYouTubePlayerApiError() { + onError({ + code: 12, + message: 'YouTube player API failed to load', + critical: true + }); + } + function onYouTubePlayerApiLoaded() { + if (destroyed) { + return; + } + + if (!YT) { + onYouTubePlayerApiError(); + return; + } + + YT.ready(() => { + if (destroyed) { + return; + } + + video = new YT.Player(videoContainer, { + height: '100%', + width: '100%', + playerVars: { + autoplay: 1, + cc_load_policy: 3, + controls: 0, + disablekb: 1, + enablejsapi: 1, + fs: 0, + iv_load_policy: 3, + loop: 0, + modestbranding: 1, + playsinline: 1, + rel: 0 + }, + events: { + onError: onVideoError, + onReady: onVideoReady, + onStateChange: onVideoStateChange + } + }); + }); + } function onVideoError(error) { var message; switch (error.data) { @@ -497,6 +519,7 @@ function YouTubeVideo(containerElement) { clearInterval(durationChangedIntervalId); clearInterval(volumeChangedIntervalId); video.destroy(); + containerElement.removeChild(scriptElement); containerElement.removeChild(videoElement); containerElement.removeChild(stylesElement); subtitles.dispatch('command', 'destroy');