Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 17:15:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

including youtube iframe api handled by the YouTubeVideo on demand

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-02-18 18:03:20 +02:00
parent 80cc9697f7
commit 7baa847972
2 changed files with 55 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/index.html
View file

@ -9,7 +9,6 @@
<body>
<div id="app"></div>
<script src="https://www.youtube.com/iframe_api"></script>
</body>
</html>

87
src/routes/Player/Video/stremio-video/YouTubeVideo.js
View file

@ -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');