jujhars13 · April 10, 2014 13:51
diff --git a/1569.html b/1569.html
 <!--
 //#1569 deltatre.com demo
 [email protected]
 -->
 <html>

 <body>

 <h1>#1569 deltatre.com player interaction 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>
    Seconds Elapsed: <span id="timecode"></span>

    <div id="messages">
        <h4>Messages:</h4>
    </div>

 </div>

 <!-- //#1569 deltatre.com player interaction demo
 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 for the play event
        el.addEventListener('play', function (e) {
            var current_time = parseInt(e.target.currentTime);
            document.getElementById("messages").insertAdjacentHTML('afterend', '<div>play @ ' + current_time.toString() + 's</div>');
        });

        //attach an event listener for the play event
        el.addEventListener('pause', function (e) {
            var current_time = parseInt(e.target.currentTime);
            document.getElementById("messages").insertAdjacentHTML('afterend', '<div>pause @ ' + current_time.toString() + 's</div>');
        });

        //attach an event listener for the player timecode change event
        el.addEventListener('timeupdate', function (e) {
            var current_time = parseInt(e.target.currentTime);
            document.getElementById("timecode").innerHTML = current_time.toString();
        });
    });


 </script>
 </body>
 </html>
	<!--
	//#1569 deltatre.com demo
	[email protected]
	-->
	<html>

	<body>

	<h1>#1569 deltatre.com player interaction 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>
	Seconds Elapsed: <span id="timecode"></span>

	<div id="messages">
	<h4>Messages:</h4>
	</div>

	</div>

	<!-- //#1569 deltatre.com player interaction demo
	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 for the play event
	el.addEventListener('play', function (e) {
	var current_time = parseInt(e.target.currentTime);
	document.getElementById("messages").insertAdjacentHTML('afterend', '<div>play @ ' + current_time.toString() + 's</div>');
	});

	//attach an event listener for the play event
	el.addEventListener('pause', function (e) {
	var current_time = parseInt(e.target.currentTime);
	document.getElementById("messages").insertAdjacentHTML('afterend', '<div>pause @ ' + current_time.toString() + 's</div>');
	});

	//attach an event listener for the player timecode change event
	el.addEventListener('timeupdate', function (e) {
	var current_time = parseInt(e.target.currentTime);
	document.getElementById("timecode").innerHTML = current_time.toString();
	});
	});


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