Monday, September 22, 2014

YouTube events are not firing from javascript


While integrating analytics with YouTube player, we found that the custom events were not firing when we use Iframe based javascript approach

Finally we found that by adding "enablejsapi=1" at the end of youtube url then is started working as expected , refer below code

Ex: http://www.youtube.com/embed/0Bmhjf0rKe8?enablejsapi=1

<iframe id="player" src="http://www.youtube.com/embed/0Bmhjf0rKe8" frameborder="0" allowfullscreen>
</iframe>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
playerVars: {
'autoplay': 1,
'controls': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
var playerReady = false;
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
playerReady = true;

}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
alert('Fired...');
}
}
</script>

0 comments:

Post a Comment