singh1469/html5-player-events.html

## html5-player-events.html
<html>

<body>

<h1>#1591 HTML5 player events demo </h1>

<div id='buto_tCMBn'></div>
<script>

    //Pure HTML5 embed (note the `delivery` parameter that's passed into the player object)
    (function (d, conf) {
        var b = d.createElement('script');
        b.setAttribute('async', true);
        b.src = '//embed.buto.tv/js/' + conf.object_id;
        if (b.addEventListener) {
            b.addEventListener('load', function () {
                if (window.buto) buto.addPlayer(conf);
            }, false);
        } else if (b.readyState) {
            b.onreadystatechange = function () {
                if (window.buto) buto.addPlayer(conf);
            };
        }
        var s = d.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(b, s);
    })(document, {object_id: 'tCMBn', element_id: 'buto_tCMBn', width: 640, height: 360, delivery: 'html5'});
</script>

<div id="history" style="margin-top:20px">

</div>


<!-- //#1591
scripts.
Done in pure JS, no jQuery here....
-->
<script>

    //wait till till the player in question is ready on the DOM
    //in HTML5 events can only be fired by a DOM element which is why the container DIV fires the events
    document.getElementById('buto_tCMBn').addEventListener('ready', function (e) {
        var el = e.target;

    	//attach an event listener to replay video once it finishes
    	el.addEventListener('ended',function(e){
    		var el = document.getElementById('history');
            el.innerHTML=el.innerHTML + '<br><br>' + 'Video play ended';
    	});

        //attach an event listener to replay video once it finishes
        el.addEventListener('play',function(e){
            var el = document.getElementById('history');
            el.innerHTML=el.innerHTML + '<br><br>' + 'Video play started';
        });

    });


</script>
</body>
</html>
	<html>

	<body>

	<h1>#1591 HTML5 player events demo </h1>

	<div id='buto_tCMBn'></div>
	<script>

	//Pure HTML5 embed (note the `delivery` parameter that's passed into the player object)
	(function (d, conf) {
	var b = d.createElement('script');
	b.setAttribute('async', true);
	b.src = '//embed.buto.tv/js/' + conf.object_id;
	if (b.addEventListener) {
	b.addEventListener('load', function () {
	if (window.buto) buto.addPlayer(conf);
	}, false);
	} else if (b.readyState) {
	b.onreadystatechange = function () {
	if (window.buto) buto.addPlayer(conf);
	};
	}
	var s = d.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(b, s);
	})(document, {object_id: 'tCMBn', element_id: 'buto_tCMBn', width: 640, height: 360, delivery: 'html5'});
	</script>

	<div id="history" style="margin-top:20px">

	</div>


	<!-- //#1591
	scripts.
	Done in pure JS, no jQuery here....
	-->
	<script>

	//wait till till the player in question is ready on the DOM
	//in HTML5 events can only be fired by a DOM element which is why the container DIV fires the events
	document.getElementById('buto_tCMBn').addEventListener('ready', function (e) {
	var el = e.target;

	//attach an event listener to replay video once it finishes
	el.addEventListener('ended',function(e){
	var el = document.getElementById('history');
	el.innerHTML=el.innerHTML + '<br><br>' + 'Video play ended';
	});

	//attach an event listener to replay video once it finishes
	el.addEventListener('play',function(e){
	var el = document.getElementById('history');
	el.innerHTML=el.innerHTML + '<br><br>' + 'Video play started';
	});

	});


	</script>
	</body>
	</html>