1<html> 2 <body> 3 <iframe id="player" type="text/html" width="640" height="390" 4 src="http://www.youtube.com/embed/308nBBeRV24?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 player.mute() 29 } 30 function onPlayerStateChange(event) { 31 if (event.data == YT.PlayerState.PLAYING) { 32 playerStatus.innerHTML = 'Playing'; 33 } else if (event.data == YT.PlayerState.BUFFERING) { 34 playerStatus.innerHTML = 'Buffering'; 35 } else if (event.data == YT.PlayerState.PAUSED) { 36 playerStatus.innerHTML = 'Paused'; 37 } else if (event.data == YT.PlayerState.CUED) { 38 playerStatus.innerHTML = 'Video Cued'; 39 } else if (event.data == YT.PlayerState.ENDED) { 40 playerStatus.innerHTML = 'Ended'; 41 } else { 42 playerStatus.innerHTML = 'Undefined'; 43 } 44 } 45 function onQualityChange(event) { 46 playbackQuality.innerHTML = player.getPlaybackQuality(); 47 } 48 </script> 49 </body> 50</html> 51