Skip to content

Instantly share code, notes, and snippets.

@leoimpett

leoimpett/index.html

Created February 5, 2023 21:30
Show Gist options
  • Save leoimpett/916961843d3fdcf74b631da6256ccc9c to your computer and use it in GitHub Desktop.
Save leoimpett/916961843d3fdcf74b631da6256ccc9c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<style>
body {
font-family: sans-serif;
}
html {
background-color: #000000;
}
.window-center{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000000;
}
.youtube-container-L {
overflow: hidden;
width: 50%;
/* Keep it the right aspect-ratio */
aspect-ratio: 4/3;
/* No clicking/hover effects */
/* pointer-events: none; */
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
/* border-color: #aeacac69;
border-width: 5px;
border-style:inset; */
padding:5px;
}
iframe {
/* Extend it beyond the viewport... */
width: 300%;
height: 100%;
/* ...and bring it back again */
margin-left: -100%;
transition: opacity .5s ease-in-out;
}
.youtube-container-R {
overflow: hidden;
width: 50%;
/* Keep it the right aspect-ratio */
aspect-ratio: 4/3;
/* No clicking/hover effects */
/* pointer-events: none; */
margin: 0;
position: absolute;
top: 50%;
left:50%;
transform: translateY(-50%);
/* border-color: #aeacac69;
border-width: 5px;
border-style:inset; */
padding:5px;
}
iframe {
/* Extend it beyond the viewport... */
width: 300%;
height: 100%;
/* ...and bring it back again */
margin-left: -100%;
opacity:0;
transition: opacity .5s ease-in-out;
}
</style>
</head>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div class="window-center">
<div class="youtube-container-L">
<div id="playerL"></div>
</div>
<div class="youtube-container-R">
<div id="playerR"></div>
</div>
</div>
<script>
var videoClips = [{'videoId': 'Thk4Gm4f6Aw', 'sceneid': 87, 'start': 541.2, 'end': 553.6},
{'videoId': 'g2Dnwn3J_hY', 'sceneid': 17, 'start': 1482.4, 'end': 1500.8},
{'videoId': 'r1CBilIqCE0', 'sceneid': 29, 'start': 686.8, 'end': 713.4},
{'videoId': 'gWCXLeCWjt4', 'sceneid': 172, 'start': 2343.8, 'end': 2357.0},
{'videoId': 'hVRy1rDEg0Q', 'sceneid': 2, 'start': 1.0, 'end': 30.8},
{'videoId': 'hlr17IpNBqQ', 'sceneid': 66, 'start': 838.185, 'end': 854.384},
{'videoId': 'tAnMTthaap0', 'sceneid': 6, 'start': 890.4, 'end': 920.4},
{'videoId': 'Y4xgV2YX9PA', 'sceneid': 47, 'start': 1104.2, 'end': 1117.2},
{'videoId': 'jXR3Lgc2cR4', 'sceneid': 13, 'start': 249.0, 'end': 279.0},
{'videoId': '5Q15AG7tIrI', 'sceneid': 44, 'start': 935.2, 'end': 946.6},
{'videoId': 'Dzfw5FzpIfE', 'sceneid': 44, 'start': 558.8, 'end': 588.8},
{'videoId': 'yaTG20pF1HI', 'sceneid': 42, 'start': 1984.6, 'end': 2005.4},
{'videoId': 'Kp8qh-N1EhM', 'sceneid': 28, 'start': 233.6, 'end': 260.0},
{'videoId': 'Y4xgV2YX9PA', 'sceneid': 68, 'start': 1575.8, 'end': 1601.8},
{'videoId': 'cnoRqGMDQ_Q', 'sceneid': 28, 'start': 301, 'end': 305.0},
{'videoId': 'a_bkBbrdyyw', 'sceneid': 68, 'start': 3035, 'end': 10000.0}
]
videoClips[0]['onset'] = 0
for (var i = 0; i < videoClips.length; i++) {
videoClips[i]['duration'] = videoClips[i]['end'] - videoClips[i]['start'];
if (i > 0){videoClips[i]['onset'] = videoClips[i-1]['onset'] + videoClips[i-1]['duration']}
}
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
var playerR;
var counter = 0;
function onYouTubeIframeAPIReady() {
playerL = new YT.Player('playerL', {
videoId: 'qxOkaU6RVz4',
playerVars: {
'start':8,
'autoplay': 1,
'controls': 0,
'disablekb': 1,
'fs': 0,
'loop': 1,
'modestbranding': 1,
'rel': 0,
'showinfo': 0,
'autohide': 1
},
events: {
// 'onReady': onLready,
'onStateChange': onLStateChange,
// 'onError': onPlayerError
}
});
playerR = new YT.Player('playerR', {
videoId: 'qxOkaU6RVz4',
playerVars: {
'start':8,
'controls': 0,
'disablekb': 1,
'fs': 0,
'loop': 1,
'modestbranding': 1,
'rel': 0,
'showinfo': 0,
'autohide': 1,
'mute':1
},
events: {
// 'onReady': onRready,
'onStateChange': onRStateChange,
// 'onError': onPlayerError
}
});
var hasStarted = 0
startDelta = -2000;
endDelta = -1000;
audioDelta = '1s';
function onLStateChange(event){
if ((playerL.getPlayerState()==1)&&(hasStarted==0)) {
hasStarted=1
console.log('Started')
for (var i = 0; i < videoClips.length; i++) { queueVideo(i) }
// Remove pointer events for playerL and playerR
$('#playerL').css({'pointer-events': 'none'})
$('#playerR').css({'pointer-events': 'none'})
}
// If state is 0, set opacity to 0
if (playerL.getPlayerState()==0) {
$('#playerL').css({'opacity': 0, 'transition-delay': '0s', 'transition-duration': 0})
} else{
$('#playerL').css({'opacity':1, 'transition-delay': audioDelta, 'transition-duration': 0})
}
}
function onRStateChange(event){
// If state is 0, set opacity to 0
if (playerR.getPlayerState()==0) {
$('#playerR').css({'opacity': 0, 'transition-delay': '0s', 'transition-duration': 0})
} else{
$('#playerR').css({'opacity':1, 'transition-delay': audioDelta, 'transition-duration': 0})
}
}
function queueVideo(ii){
setTimeout( startVideo , Math.max((1000*videoClips[ii].onset) + startDelta, 0) , ii)
setTimeout( muteVideo , 1000*(videoClips[ii].onset+videoClips[ii].duration) +endDelta , ii)
}
function startVideo(idx) {
console.log('startVideo: ' + idx)
if(idx % 2 == 1){
playerR.loadVideoById(videoClips[idx].videoId, videoClips[idx].start);
playerR.playVideo();
playerR.unMute();
playerR.setPlaybackRate(1.0);
}
else{
playerL.loadVideoById(videoClips[idx].videoId, videoClips[idx].start);
playerL.playVideo();
playerL.unMute();
playerL.setPlaybackRate(1.0);
}
// setTimeout(stopVideo, 2000);
}
function muteVideo(idx){
console.log('muting video: ' + idx)
if(idx % 2 == 1){
playerR.mute();
playerR.setPlaybackRate(0.25);
$('#playerR').css({'opacity': .8, 'transition-delay': '0s', 'transition-duration': '.25s'})
}
else{
playerL.mute();
playerL.setPlaybackRate(0.25);
$('#playerL').css({'opacity': .8, 'transition-delay': '0s', 'transition-duration': '.25s'})
}
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment