1 <html> 2 <body> 3 <iframe id="player" type="text/html" width="640" height="390" 4 src="http://www.youtube.com/embed/50MukADPNCA?enablejsapi=1&html5=1" 5 frameborder="0"></iframe> 6 <br> 7 Player status: <span id='playerStatus'>Unstarted</span> 8 <br> 9 Playback quality: <span id='playbackQuality'>None</span> 10 <script> 11 var tag = document.createElement('script'); 12 tag.src = "//www.youtube.com/iframe_api"; 13 var firstScriptTag = document.getElementsByTagName('script')[0]; 14 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 15 var player; 16 function onYouTubeIframeAPIReady() { 17 player = new YT.Player('player', { 18 events: { 19 'onReady': onPlayerReady, 20 'onStateChange': onPlayerStateChange, 21 'onPlaybackQualityChange': onQualityChange 22 } 23 }); 24 } 25 function onPlayerReady(event) { 26 playerStatus.innerHTML = 'Ready'; 27 event.target.playVideo(); 28 } 29 function onPlayerStateChange(event) { 30 if (event.data == YT.PlayerState.PLAYING) { 31 playerStatus.innerHTML = 'Playing'; 32 } else if (event.data == YT.PlayerState.BUFFERING) { 33 playerStatus.innerHTML = 'Buffering'; 34 } else if (event.data == YT.PlayerState.PAUSED) { 35 playerStatus.innerHTML = 'Paused'; 36 } else if (event.data == YT.PlayerState.CUED) { 37 playerStatus.innerHTML = 'Video Cued'; 38 } else if (event.data == YT.PlayerState.ENDED) { 39 playerStatus.innerHTML = 'Ended'; 40 } else { 41 playerStatus.innerHTML = 'Undefined'; 42 } 43 } 44 function onQualityChange(event) { 45 playbackQuality.innerHTML = player.getPlaybackQuality(); 46 } 47 </script> 48 </body> 49 </html> 50
