matthewoestreich · January 28, 2020 20:50
diff --git a/youtube_iframe_api_jquery_poc.html b/youtube_iframe_api_jquery_poc.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="UTF-8">
  <title>Custom YouTube Controls</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>

 <body>
  <div id="video-placeholder"></div>
  <div>
    <i id="play" style="cursor: pointer;" class="material-icons">play_arrow</i>
    <i id="pause" style="cursor: pointer;" class="material-icons">pause</i>
    <i id="stop" style="cursor: pointer;" class="material-icons">stop</i>
    <input id="progress-bar" type="range" style="width: 300px;">
    <span id="current-time"></span>
    <span id="duration"></span>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  <script src="https://www.youtube.com/iframe_api"></script>
  <script>
    /** 
     * CONFIGURATION
     */

    var YOUTUBE_PLAYER,
      YOUTUBE_PLAYER_EL = "video-placeholder", // Don't have to specify "#" here
      YOUTUBE_VIDEO_ID = "Xa0Q0J5tOP0",
      START_TIME = "1:00",
      END_TIME = "1:20",
      PLAY_EL = "#play",
      PAUSE_EL = "#pause",
      STOP_EL = "#stop",
      PROGRESS_BAR_EL = "#progress-bar",
      CURRENT_TIME_EL = "#current-time",
      DURATION_EL = "#duration";

    /**
     * FUNCTIONS
     */

    function onYouTubeIframeAPIReady() {
      /**
       * Builds main YouTube API object
       */

      YOUTUBE_PLAYER = new YT.Player(YOUTUBE_PLAYER_EL, {
        width: 600,
        height: 400,
        videoId: YOUTUBE_VIDEO_ID,
        playerVars: {
          // Supported player params can be found at https://developers.google.com/youtube/player_parameters#Parameters
          controls: 0, // disable video controls on mouse over
          disablekb: 1, // disable keyboard controls
          start: minutesToSeconds(START_TIME),
          end: minutesToSeconds(END_TIME),
        },
        events: {
          onReady: () => initialize(START_TIME, END_TIME, YOUTUBE_PLAYER, PLAY_EL, PAUSE_EL, STOP_EL, PROGRESS_BAR_EL, CURRENT_TIME_EL, DURATION_EL)
        }
      });
    }

    function initialize(videoStartTime, videoEndTime, playerObj, playElId, pauseElId, stopElId, progressBarElId, currentTimeElId, durationElId) {
      /**
       * Initializes all functions for player.
       * The reason we check for PlayerState is because if the video ends, and a user clicks play
       * it will start from the very beginning instead of our desired start time.
       *
       * More can be found https://developers.google.com/youtube/iframe_api_reference#Playback_status
       */

      const START_SECONDS = minutesToSeconds(videoStartTime),
        END_SECONDS = minutesToSeconds(videoEndTime),
        TOTAL_SECONDS = END_SECONDS - START_SECONDS;

      // Make sure the end time is greater than the start time, the total play time is greater 
      // than 0 and we didnt specify an end time greater than the videos length
      if (END_SECONDS > START_SECONDS && TOTAL_SECONDS > 0 && playerObj.getDuration() > END_SECONDS) {

        $(playElId).on('click', () => { // Set play button click handler          
          playerObj.getPlayerState() === 0 ? playerObj.seekTo(START_SECONDS) : null; // a state of 0 means 'ended'
          playerObj.playVideo();
        });

        $(pauseElId).on('click', () => playerObj.pauseVideo()); // Set pause button click handler

        $(stopElId).on('click', () => {
          playerObj.pauseVideo();
          playerObj.seekTo(START_SECONDS);          
        }); // Set stop button click handler

        $(progressBarElId) // Set min/max values for progress bar & set mouseup and touchend handlers
          .attr('min', 0).attr('max', TOTAL_SECONDS).on('mouseup touchend', e => playerObj.seekTo(Number(e.target.value) + Number(START_SECONDS)));

        playerObj.seekTo(START_SECONDS); // Sets the progress bar to correct start time
        doUpdate(currentTimeElId, durationElId, progressBarElId, playerObj, START_SECONDS, TOTAL_SECONDS); // Updates progress bar and timestamp

        let time_update_interval = setInterval(() => { // Creates interval for updating progress bar and timestamp
          doUpdate(currentTimeElId, durationElId, progressBarElId, playerObj, START_SECONDS, TOTAL_SECONDS);
        }, 1000);
      
      } else {
        playerObj.destroy();
        alert("Unable to play video, please verify supplied parameters!")
      }
    }


    function doUpdate(currentTimeElId, durationElId, progressBarElId, playerObj, startSeconds, totalSeconds) {
      /**
       * Updates current_time / duration
       * Updates progress_bar
       */

      updateTimerDisplay(currentTimeElId, durationElId, playerObj, startSeconds, totalSeconds);
      updateProgressBar(progressBarElId, playerObj, startSeconds);
    }


    function updateTimerDisplay(currentTimeElId, durationElId, playerObj, startSeconds, totalSeconds) {
      /**
       * Updates current_time / duration
       */

      $(currentTimeElId).text(formatTime(Number(playerObj.getCurrentTime()) - Number(startSeconds)));
      $(durationElId).text(formatTime(totalSeconds));
    }


    function formatTime(time) {
      /**
       * Formats time in xx:xx format
       */

      time = Math.round(time);
      let minutes = Math.floor(time / 60),
        seconds = time - minutes * 60;
      seconds = seconds < 10 ? '0' + seconds : seconds;
      return minutes + ":" + seconds;
    }


    function updateProgressBar(progressBarElId, playerObj, startSeconds) {
      /**
       * Updates progress bar
       */

      //$(progressBarElId).val(playerObj.getCurrentTime());
      $(progressBarElId).val(playerObj.getCurrentTime() - startSeconds);
    }
    

    function minutesToSeconds(mins) {
      /**
       * ~~ mins param must be a str in "1:00" format ~~
       * Converts time in xx:xx format to seconds
       */

      let p = mins.split(":");
      return Number((Number(p[0]) * 60 + Number(p[1])).toFixed(3));
    }
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>Custom YouTube Controls</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	</head>

	<body>
	<div id="video-placeholder"></div>
	<div>
	<i id="play" style="cursor: pointer;" class="material-icons">play_arrow</i>
	<i id="pause" style="cursor: pointer;" class="material-icons">pause</i>
	<i id="stop" style="cursor: pointer;" class="material-icons">stop</i>
	<input id="progress-bar" type="range" style="width: 300px;">
	<span id="current-time"></span>
	<span id="duration"></span>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
	<script src="https://www.youtube.com/iframe_api"></script>
	<script>
	/**
	* CONFIGURATION
	*/

	var YOUTUBE_PLAYER,
	YOUTUBE_PLAYER_EL = "video-placeholder", // Don't have to specify "#" here
	YOUTUBE_VIDEO_ID = "Xa0Q0J5tOP0",
	START_TIME = "1:00",
	END_TIME = "1:20",
	PLAY_EL = "#play",
	PAUSE_EL = "#pause",
	STOP_EL = "#stop",
	PROGRESS_BAR_EL = "#progress-bar",
	CURRENT_TIME_EL = "#current-time",
	DURATION_EL = "#duration";

	/**
	* FUNCTIONS
	*/

	function onYouTubeIframeAPIReady() {
	/**
	* Builds main YouTube API object
	*/

	YOUTUBE_PLAYER = new YT.Player(YOUTUBE_PLAYER_EL, {
	width: 600,
	height: 400,
	videoId: YOUTUBE_VIDEO_ID,
	playerVars: {
	// Supported player params can be found at https://developers.google.com/youtube/player_parameters#Parameters
	controls: 0, // disable video controls on mouse over
	disablekb: 1, // disable keyboard controls
	start: minutesToSeconds(START_TIME),
	end: minutesToSeconds(END_TIME),
	},
	events: {
	onReady: () => initialize(START_TIME, END_TIME, YOUTUBE_PLAYER, PLAY_EL, PAUSE_EL, STOP_EL, PROGRESS_BAR_EL, CURRENT_TIME_EL, DURATION_EL)
	}
	});
	}

	function initialize(videoStartTime, videoEndTime, playerObj, playElId, pauseElId, stopElId, progressBarElId, currentTimeElId, durationElId) {
	/**
	* Initializes all functions for player.
	* The reason we check for PlayerState is because if the video ends, and a user clicks play
	* it will start from the very beginning instead of our desired start time.
	*
	* More can be found https://developers.google.com/youtube/iframe_api_reference#Playback_status
	*/

	const START_SECONDS = minutesToSeconds(videoStartTime),
	END_SECONDS = minutesToSeconds(videoEndTime),
	TOTAL_SECONDS = END_SECONDS - START_SECONDS;

	// Make sure the end time is greater than the start time, the total play time is greater
	// than 0 and we didnt specify an end time greater than the videos length
	if (END_SECONDS > START_SECONDS && TOTAL_SECONDS > 0 && playerObj.getDuration() > END_SECONDS) {

	$(playElId).on('click', () => { // Set play button click handler
	playerObj.getPlayerState() === 0 ? playerObj.seekTo(START_SECONDS) : null; // a state of 0 means 'ended'
	playerObj.playVideo();
	});

	$(pauseElId).on('click', () => playerObj.pauseVideo()); // Set pause button click handler

	$(stopElId).on('click', () => {
	playerObj.pauseVideo();
	playerObj.seekTo(START_SECONDS);
	}); // Set stop button click handler

	$(progressBarElId) // Set min/max values for progress bar & set mouseup and touchend handlers
	.attr('min', 0).attr('max', TOTAL_SECONDS).on('mouseup touchend', e => playerObj.seekTo(Number(e.target.value) + Number(START_SECONDS)));

	playerObj.seekTo(START_SECONDS); // Sets the progress bar to correct start time
	doUpdate(currentTimeElId, durationElId, progressBarElId, playerObj, START_SECONDS, TOTAL_SECONDS); // Updates progress bar and timestamp

	let time_update_interval = setInterval(() => { // Creates interval for updating progress bar and timestamp
	doUpdate(currentTimeElId, durationElId, progressBarElId, playerObj, START_SECONDS, TOTAL_SECONDS);
	}, 1000);

	} else {
	playerObj.destroy();
	alert("Unable to play video, please verify supplied parameters!")
	}
	}


	function doUpdate(currentTimeElId, durationElId, progressBarElId, playerObj, startSeconds, totalSeconds) {
	/**
	* Updates current_time / duration
	* Updates progress_bar
	*/

	updateTimerDisplay(currentTimeElId, durationElId, playerObj, startSeconds, totalSeconds);
	updateProgressBar(progressBarElId, playerObj, startSeconds);
	}


	function updateTimerDisplay(currentTimeElId, durationElId, playerObj, startSeconds, totalSeconds) {
	/**
	* Updates current_time / duration
	*/

	$(currentTimeElId).text(formatTime(Number(playerObj.getCurrentTime()) - Number(startSeconds)));
	$(durationElId).text(formatTime(totalSeconds));
	}


	function formatTime(time) {
	/**
	* Formats time in xx:xx format
	*/

	time = Math.round(time);
	let minutes = Math.floor(time / 60),
	seconds = time - minutes * 60;
	seconds = seconds < 10 ? '0' + seconds : seconds;
	return minutes + ":" + seconds;
	}


	function updateProgressBar(progressBarElId, playerObj, startSeconds) {
	/**
	* Updates progress bar
	*/

	//$(progressBarElId).val(playerObj.getCurrentTime());
	$(progressBarElId).val(playerObj.getCurrentTime() - startSeconds);
	}


	function minutesToSeconds(mins) {
	/**
	* ~~ mins param must be a str in "1:00" format ~~
	* Converts time in xx:xx format to seconds
	*/

	let p = mins.split(":");
	return Number((Number(p[0]) * 60 + Number(p[1])).toFixed(3));
	}
	</script>
	</body>

	</html>