leoimpett · February 5, 2023 17:25
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <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 {
 	overflow: hidden;
 	width: 100%;
 	/* Keep it the right aspect-ratio */
 	aspect-ratio: 16/9;
 	/* No clicking/hover effects */
 	/* pointer-events: none; */
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
 }
 iframe {
 		/* Extend it beyond the viewport... */
 		width: 300%;
 		height: 100%;
 		/* ...and bring it back again */
 		margin-left: -100%;
 	}
        </style>
    </head>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div class="window-center">
        <div class="youtube-container">
                 <div id="player"></div>
            </div>
        </div>
    <script>



    var videoClips = [{'videoId': 'FsKQ9x-yff4', 'sceneid': 84, 'start': 909.2, 'end': 928.2},
 {'videoId': 'q8hC9Uy1OVs', 'sceneid': 42, 'start': 2298.174, 'end': 2317.574},
 {'videoId': 'jXR3Lgc2cR4', 'sceneid': 10, 'start': 176.2, 'end': 203.6},
 {'videoId': '41fcGC_-VEc', 'sceneid': 21, 'start': 149.6, 'end': 164.2},
 {'videoId': 'Dzfw5FzpIfE', 'sceneid': 45, 'start': 588.8, 'end': 614.76},
 {'videoId': 'SKQzDreTz1I', 'sceneid': 5, 'start': 1987.0, 'end': 2010.6},
 {'videoId': 'hlr17IpNBqQ', 'sceneid': 193, 'start': 2194.16, 'end': 2204.44},
 {'videoId': '5Q15AG7tIrI', 'sceneid': 1, 'start': 1.0, 'end': 20.2},
 {'videoId': 'L0HI532Q2nE', 'sceneid': 19, 'start': 384.2, 'end': 395.0},
 {'videoId': 'Y4xgV2YX9PA', 'sceneid': 48, 'start': 1117.2, 'end': 1147.2},
 {'videoId': 'Dzfw5FzpIfE', 'sceneid': 22, 'start': 375.2, 'end': 389.2},
 {'videoId': 'YYhrS3HNgv8', 'sceneid': 32, 'start': 398.4, 'end': 415.4},
 {'videoId': 'hVRy1rDEg0Q', 'sceneid': 30, 'start': 338.0, 'end': 362.4},
 {'videoId': 'oZj2sGR8bfs', 'sceneid': 53, 'start': 965.8, 'end': 980.0},
 {'videoId': 'YvRiLW4f8eI', 'sceneid': 95, 'start': 806.2, 'end': 818.4},
 {'videoId': 'mIL_F3Bvc2A', 'sceneid': 49, 'start': 845.2, 'end': 860.8}]

      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 counter = 0;
      function onYouTubeIframeAPIReady() {
        
        player = new YT.Player('player', {
            videoId: 'qxOkaU6RVz4',
            playerVars: { 
                'start':5,
                'autoplay': 1,
                'controls': 0,
                'disablekb': 1,
                'fs': 0,
                'loop': 1,
                'modestbranding': 1,
                'rel': 0,
                'showinfo': 0,
                'autohide': 1
                },
            events: {
            // 'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
            'onError': onPlayerError
            }
        });
        }
                


      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
    //   var done = false;
        var isPlaying = 0;

        function onPlayerError(event) {
            console.log('playerError: ' + event)
            player.loadVideoById({'videoId': videoClips[counter].videoId, 
                'startSeconds': videoClips[counter].start, 
                'endSeconds': videoClips[counter].end});
            counter++;
        }

      function onPlayerStateChange(event) { 
        // console.log('playerState: ' + player.getPlayerState())
        // console.log('counter: ' + counter)

            // This weird extra bit is required because sometimes the code goes from -1 to 0 straightaway - 
            // that is, from not-yet-loaded to stopped. Here we check that we're going from 1 (playing)
            // to 0 (stopped). 
        if (player.getPlayerState()==1){
            isPlaying = 1 ;
        }
        if (player.getPlayerState()==-1){
            isPlaying = 0 ;
        }

        if((player.getPlayerState()==0) && (isPlaying==1)){
            // console.log('Finished video')
            // Sanity check to make sure we've played at least a bit of video
                    
            if(counter>=videoClips.length){
                // console.log('Finished queue')
                player.destroy();
            }
            else{
                // console.log('Loading next video: '+ videoClips[counter].videoId)
                player.loadVideoById({'videoId': videoClips[counter].videoId, 
                'startSeconds': videoClips[counter].start, 
                'endSeconds': videoClips[counter].end});
                counter++;
            }
        }


        // if (event.data == YT.PlayerState.PLAYING && !done) {
        //   setTimeout(stopVideo, 6000);
        //   done = true;
        // }
      }
    //   function stopVideo() { 
    //     player.stopVideo();
    //   }


    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<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 {
	overflow: hidden;
	width: 100%;
	/* Keep it the right aspect-ratio */
	aspect-ratio: 16/9;
	/* No clicking/hover effects */
	/* pointer-events: none; */
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	}
	iframe {
	/* Extend it beyond the viewport... */
	width: 300%;
	height: 100%;
	/* ...and bring it back again */
	margin-left: -100%;
	}
	</style>
	</head>
	<body>
	<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
	<div class="window-center">
	<div class="youtube-container">
	<div id="player"></div>
	</div>
	</div>
	<script>



	var videoClips = [{'videoId': 'FsKQ9x-yff4', 'sceneid': 84, 'start': 909.2, 'end': 928.2},
	{'videoId': 'q8hC9Uy1OVs', 'sceneid': 42, 'start': 2298.174, 'end': 2317.574},
	{'videoId': 'jXR3Lgc2cR4', 'sceneid': 10, 'start': 176.2, 'end': 203.6},
	{'videoId': '41fcGC_-VEc', 'sceneid': 21, 'start': 149.6, 'end': 164.2},
	{'videoId': 'Dzfw5FzpIfE', 'sceneid': 45, 'start': 588.8, 'end': 614.76},
	{'videoId': 'SKQzDreTz1I', 'sceneid': 5, 'start': 1987.0, 'end': 2010.6},
	{'videoId': 'hlr17IpNBqQ', 'sceneid': 193, 'start': 2194.16, 'end': 2204.44},
	{'videoId': '5Q15AG7tIrI', 'sceneid': 1, 'start': 1.0, 'end': 20.2},
	{'videoId': 'L0HI532Q2nE', 'sceneid': 19, 'start': 384.2, 'end': 395.0},
	{'videoId': 'Y4xgV2YX9PA', 'sceneid': 48, 'start': 1117.2, 'end': 1147.2},
	{'videoId': 'Dzfw5FzpIfE', 'sceneid': 22, 'start': 375.2, 'end': 389.2},
	{'videoId': 'YYhrS3HNgv8', 'sceneid': 32, 'start': 398.4, 'end': 415.4},
	{'videoId': 'hVRy1rDEg0Q', 'sceneid': 30, 'start': 338.0, 'end': 362.4},
	{'videoId': 'oZj2sGR8bfs', 'sceneid': 53, 'start': 965.8, 'end': 980.0},
	{'videoId': 'YvRiLW4f8eI', 'sceneid': 95, 'start': 806.2, 'end': 818.4},
	{'videoId': 'mIL_F3Bvc2A', 'sceneid': 49, 'start': 845.2, 'end': 860.8}]

	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 counter = 0;
	function onYouTubeIframeAPIReady() {

	player = new YT.Player('player', {
	videoId: 'qxOkaU6RVz4',
	playerVars: {
	'start':5,
	'autoplay': 1,
	'controls': 0,
	'disablekb': 1,
	'fs': 0,
	'loop': 1,
	'modestbranding': 1,
	'rel': 0,
	'showinfo': 0,
	'autohide': 1
	},
	events: {
	// 'onReady': onPlayerReady,
	'onStateChange': onPlayerStateChange,
	'onError': onPlayerError
	}
	});
	}



	// 5. The API calls this function when the player's state changes.
	// The function indicates that when playing a video (state=1),
	// the player should play for six seconds and then stop.
	// var done = false;
	var isPlaying = 0;

	function onPlayerError(event) {
	console.log('playerError: ' + event)
	player.loadVideoById({'videoId': videoClips[counter].videoId,
	'startSeconds': videoClips[counter].start,
	'endSeconds': videoClips[counter].end});
	counter++;
	}

	function onPlayerStateChange(event) {
	// console.log('playerState: ' + player.getPlayerState())
	// console.log('counter: ' + counter)

	// This weird extra bit is required because sometimes the code goes from -1 to 0 straightaway -
	// that is, from not-yet-loaded to stopped. Here we check that we're going from 1 (playing)
	// to 0 (stopped).
	if (player.getPlayerState()==1){
	isPlaying = 1 ;
	}
	if (player.getPlayerState()==-1){
	isPlaying = 0 ;
	}

	if((player.getPlayerState()==0) && (isPlaying==1)){
	// console.log('Finished video')
	// Sanity check to make sure we've played at least a bit of video

	if(counter>=videoClips.length){
	// console.log('Finished queue')
	player.destroy();
	}
	else{
	// console.log('Loading next video: '+ videoClips[counter].videoId)
	player.loadVideoById({'videoId': videoClips[counter].videoId,
	'startSeconds': videoClips[counter].start,
	'endSeconds': videoClips[counter].end});
	counter++;
	}
	}


	// if (event.data == YT.PlayerState.PLAYING && !done) {
	// setTimeout(stopVideo, 6000);
	// done = true;
	// }
	}
	// function stopVideo() {
	// player.stopVideo();
	// }


	</script>
	</body>
	</html>