Created
August 30, 2014 10:47
-
-
Save mpgn/855e47e85e991963c992 to your computer and use it in GitHub Desktop.
YouTube Javascript Player API Tutoriel : http://youtu.be/2liztlOx0NY.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="fr"> | |
| <head> | |
| <title>Player YouTube JS</title> | |
| <!-- Latest compiled and minified CSS --> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <!-- Optional theme --> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | |
| <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /> | |
| <!-- Latest compiled and minified JavaScript --> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script> | |
| <style type="text/css"> | |
| #slider .ui-slider-range { background: #ef2929; } | |
| #slider .ui-slider-handle { border-color: #ef2929; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <h3>Title YouTube Player</h3> | |
| <div class="col-md-8"> | |
| <div id="player"></div> | |
| </div> | |
| <div class="col-md-7"> | |
| <div class="col-md-1"> | |
| <!-- button play/pause --> | |
| <span class="button-play glyphicon glyphicon-play"></span> | |
| <span class="button-play glyphicon glyphicon-pause" style="display:none"></span> | |
| </div> | |
| <div class="col-md-1"> | |
| <!-- button volume --> | |
| <span class="button-volume glyphicon glyphicon-volume-up"></span> | |
| <span class="button-volume glyphicon glyphicon-volume-down" style="display:none"></span> | |
| </div> | |
| <div class="col-md-9"> | |
| <!-- input range with JqueryUI --> | |
| <div id="slider"></div> | |
| </div> | |
| <div class="col-md-1"> | |
| <!-- button fullscreen --> | |
| <span class="button-resize glyphicon glyphicon-resize-full" id="fullsize"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| $("#slider").slider({ | |
| range: "min" | |
| }); | |
| </script> | |
| <script src="player.js"></script> | |
| </body> | |
| </html> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var tag = document.createElement('script'); | |
| tag.src = "//www.youtube.com/iframe_api"; | |
| var firstScriptTag = document.getElementsByTagName('script')[0]; | |
| firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
| var player; | |
| function onYouTubeIframeAPIReady() { | |
| player = new YT.Player('player', { | |
| width: '682', | |
| height: '383', | |
| videoId: 'l-gQLqv9f4o', | |
| playerVars: { | |
| 'controls' : 0, | |
| 'modestbranding' : 1, | |
| 'rel' : 0, | |
| 'showinfo' : 0 | |
| }, | |
| events: { | |
| 'onReady': onPlayerReady, | |
| 'onStateChange': onPlayerStateChange | |
| } | |
| }); | |
| } | |
| var ready = false; | |
| function onPlayerReady(event) { | |
| ready = true; | |
| $('.button-play').click(function() { | |
| var pst = player.getPlayerState(); | |
| if(pst == 0 || pst == 2 || pst == 5) { | |
| player.playVideo(); | |
| } else if (pst == 1) { | |
| player.pauseVideo(); | |
| } | |
| }); | |
| $('.button-volume').click(function() { | |
| if(player.isMuted()) { | |
| player.unMute(); | |
| $('.glyphicon-volume-down').hide(); | |
| $('.glyphicon-volume-up').show(); | |
| } else { | |
| player.mute(); | |
| $('.glyphicon-volume-up').hide(); | |
| $('.glyphicon-volume-down').show(); | |
| } | |
| }); | |
| var query = document.querySelector.bind(document); | |
| // Once the user clicks a custom fullscreen button | |
| query('#fullsize').addEventListener('click', function(){ | |
| // Play video and go fullscreen | |
| player.playVideo(); | |
| var playerElement = query("#player"); | |
| var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen; | |
| if (requestFullScreen) { | |
| requestFullScreen.bind(playerElement)(); | |
| } | |
| }); | |
| $('#slider').on("slide", function(event, ui) { | |
| player.pauseVideo(); | |
| }); | |
| $('#slider').on("slidestop", function(event, ui) { | |
| var timeVideo = player.getDuration(); | |
| var seekTo = (ui.value*timeVideo)/100; | |
| player.seekTo(seekTo, true); | |
| player.playVideo(); | |
| }); | |
| } | |
| function onPlayerStateChange(event) { | |
| if (event.data == YT.PlayerState.PLAYING) { | |
| $('.glyphicon-play').hide(); | |
| $('.glyphicon-pause').show(); | |
| var timeVideo = player.getDuration(); | |
| mytimer = setInterval(function() { | |
| timeElapsed = player.getCurrentTime(); | |
| currentTime = ( timeElapsed / timeVideo ) * 100; | |
| if(currentTime > 100) { | |
| $('#slider').slider('value', 0); | |
| } else { | |
| $('#slider').slider('value', currentTime); | |
| } | |
| }, 100); | |
| } else { | |
| clearTimeout(mytimer); | |
| $('.glyphicon-pause').hide(); | |
| $('.glyphicon-play').show(); | |
| } | |
| } | |
| function stopVideo() { | |
| player.stopVideo(); | |
| } | |
| function playVideo() { | |
| if(ready) player.playVideo(); | |
| else setTimeout(function(){ playVideo() },1000); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment