Play and Pause Buttons for YouTube and Vimeo Videos (via Their APIs)

The Vimeo player API actually works by sending commands through <span style="color: #2e2f3e;">postMessage</span> right to the iframe. You don’t need the froogaloop library to do that, but <span style="color: #2e2f3e;">postMessage</span> has some inherent complexities that this library (by Vimeo themselves) makes way easier. Plus it’s only 1.8kb so I’d recommend it.



						
			

		

		
		
	


				
					
	

		

			

				
How to Control YouTube’s Video Player with JavaScript

			


					


				

			

			

    

  • 

    Player Initialization
    

    <span class="hljs-keyword">var</span> player;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">onYouTubeIframeAPIReady</span>() </span>{
    player = <span class="hljs-keyword">new</span> YT.Player(<span class="hljs-string">'video-placeholder'</span>, {
        width: <span class="hljs-number">600</span>,
        height: <span class="hljs-number">400</span>,
        videoId: <span class="hljs-string">'Xa0Q0J5tOP0'</span>,
        playerVars: {
            color: <span class="hljs-string">'white'</span>,
            playlist: <span class="hljs-string">'taJ60kskkns,FG0fTKAqZ5g'</span>
        },
        events: {
            onReady: initialize
        }
    });
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initialize</span>()</span>{

    <span class="hljs-comment">// Update the controls on load</span>
    updateTimerDisplay();
    updateProgressBar();

    <span class="hljs-comment">// Clear any old interval.</span>
    clearInterval(time_update_interval);

    <span class="hljs-comment">// Start interval to update elapsed time display and</span>
    <span class="hljs-comment">// the elapsed part of the progress bar every second.</span>
    time_update_interval = setInterval(<span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{
        updateTimerDisplay();
        updateProgressBar();
    }, <span class="hljs-number">1000</span>)

}
    

    • 

  • 

    Duration
    

    0:16 / 4:50
    

    <span class="hljs-comment">// This function is called by initialize()</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateTimerDisplay</span>()</span>{
    <span class="hljs-comment">// Update current time text display.</span>
    $(<span class="hljs-string">'#current-time'</span>).text(formatTime( player.getCurrentTime() ));
    $(<span class="hljs-string">'#duration'</span>).text(formatTime( player.getDuration() ));
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">formatTime</span>(<span class="hljs-params">time</span>)</span>{
    time = <span class="hljs-built_in">Math</span>.round(time);

    <span class="hljs-keyword">var</span> minutes = <span class="hljs-built_in">Math</span>.floor(time / <span class="hljs-number">60</span>),
    seconds = time - minutes * <span class="hljs-number">60</span>;

    seconds = seconds < <span class="hljs-number">10</span> ? <span class="hljs-string">'0'</span> + seconds : seconds;

    <span class="hljs-keyword">return</span> minutes + <span class="hljs-string">":"</span> + seconds;
}
    

    • 

  • 

      

    • 

      Play
      

      play_arrow
      

      $(<span class="hljs-string">'#play'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{

    player.playVideo();

});
      

      • 

    • 

      Pause
      

      pause
      

      $(<span class="hljs-string">'#pause'</span>).on(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> () </span>{

    player.pauseVideo();

});
      

      • 

    • 

    

    • 



						
			

		

		
		
	


				
					
	

		

			

				
ES2015 const is not about immutability

			


					


				

			

			

<span style="color: #333333;">const</span> creates an immutable binding


To make an object’s values immutable, use Object.freeze(). It has been around since ES5 and is widely available nowadays.


<span class="keyword">const</span> foo = <span class="built_in">Object</span>.freeze({
	<span class="string">'bar'</span>: <span class="number">27</span>
});
foo.bar = <span class="number">42</span>; <span class="comment">// throws a TypeError exception in strict mode;</span>
              <span class="comment">// silently fails in sloppy mode</span>



						
			

		

		
		
	


				
					
	

		

			

				
You Might Not Need JQuery

			


					


				

			

			

JQUERY


$.getJSON('/my/url', function(data) {


});


IE9+


var request = new XMLHttpRequest();

request.open('GET', '/my/url', true);


request.onload = function() {

if (request.status >= 200 && request.status < 400) {

// Success!

var data = JSON.parse(request.responseText);

} else {

// We reached our target server, but it returned an error


}

};


request.onerror = function() {

// There was a connection error of some sort

};


request.send();