juliaguar/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
        function playVid() {
            var myAudio = document.getElementsByTagName('audio')[0];
						var myVideo = document.getElementsByTagName('video')[0];
						myVideo.play();
						// var mediaCrtl = new MediaController();
						// myAudio.controller = mediaCrtl;
						// myVideo.controller = mediaCrtl;
						// mediaCrtl.play();
						// myAudio.controller.play();
        };
				function playAud() {
					alert('aud');
						var myAudio = document.getElementsByTagName('audio')[0];
						if (myAudio.paused) {
								myAudio.play();
						}else {
								myAudio.pause();
						}
				};

				//having 2 event listeners: only one of them gets to play
				// document.addEventListener('touchstart', function(e) {
				// // document.addEventListener('click', function(e) {
				// 	e.preventDefault();
				// 	var myAudio = document.getElementsByTagName('audio')[0];
				// 	myAudio.play();
				//
				// });

				document.addEventListener('touchstart', function(e) {
				// document.addEventListener('click', function(e) {
			    e.preventDefault();
			    // var touch = e.touches[0];
			    // alert(touch.pageX + " - " + touch.pageY);
					var myAudio = document.getElementsByTagName('audio')[0];
					var myVideo = document.getElementsByTagName('video')[0];

					myVideo.play();

					// //works only for the first element
					// var vbutton = document.getElementsByTagName('button')[0];
					// var abutton = document.getElementsByTagName('button')[1];
					// vbutton.click();
					// abutton.click();

					//adding mediagroup in html - only working when audio is the only element in the 'group'^^
					// myAudio.controller.play();

					// add mediagroup in html - same same
					// myVideo.controller.play();

					// MediaController - not working so far
					// var mediaCrtl = new MediaController();
					// myAudio.controller = mediaCrtl;
					// myVideo.controller = mediaCrtl;
					// mediaCrtl.play();
				}, false);

    </script>
	</head>

	<body>
		<h1>Hello</h1>
		<video src='asciinema.mp4' height="270" width="480" mediagroup='play'></video>
		<a href="javascript:playVid();">video</a>
		<button onclick='playVid()'>video</button>
		<br>
		<audio id='audio' controls>
		  <source src="audio.mp3" type="audio/mpeg">
			<source src="audio.en.ogg" type="audio/mpeg">
		</audio>
		<!-- <button onclick='playAud()'>audio</button> -->
		<a href="javascript:playAud();" controls>audio</a>
	</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript">
	function playVid() {
	var myAudio = document.getElementsByTagName('audio')[0];
	var myVideo = document.getElementsByTagName('video')[0];
	myVideo.play();
	// var mediaCrtl = new MediaController();
	// myAudio.controller = mediaCrtl;
	// myVideo.controller = mediaCrtl;
	// mediaCrtl.play();
	// myAudio.controller.play();
	};
	function playAud() {
	alert('aud');
	var myAudio = document.getElementsByTagName('audio')[0];
	if (myAudio.paused) {
	myAudio.play();
	}else {
	myAudio.pause();
	}
	};

	//having 2 event listeners: only one of them gets to play
	// document.addEventListener('touchstart', function(e) {
	// // document.addEventListener('click', function(e) {
	// e.preventDefault();
	// var myAudio = document.getElementsByTagName('audio')[0];
	// myAudio.play();
	//
	// });

	document.addEventListener('touchstart', function(e) {
	// document.addEventListener('click', function(e) {
	e.preventDefault();
	// var touch = e.touches[0];
	// alert(touch.pageX + " - " + touch.pageY);
	var myAudio = document.getElementsByTagName('audio')[0];
	var myVideo = document.getElementsByTagName('video')[0];

	myVideo.play();

	// //works only for the first element
	// var vbutton = document.getElementsByTagName('button')[0];
	// var abutton = document.getElementsByTagName('button')[1];
	// vbutton.click();
	// abutton.click();

	//adding mediagroup in html - only working when audio is the only element in the 'group'^^
	// myAudio.controller.play();

	// add mediagroup in html - same same
	// myVideo.controller.play();

	// MediaController - not working so far
	// var mediaCrtl = new MediaController();
	// myAudio.controller = mediaCrtl;
	// myVideo.controller = mediaCrtl;
	// mediaCrtl.play();
	}, false);

	</script>
	</head>

	<body>
	<h1>Hello</h1>
	<video src='asciinema.mp4' height="270" width="480" mediagroup='play'></video>
	<a href="javascript:playVid();">video</a>
	<button onclick='playVid()'>video</button>
	<br>
	<audio id='audio' controls>
	<source src="audio.mp3" type="audio/mpeg">
	<source src="audio.en.ogg" type="audio/mpeg">
	</audio>
	<!-- <button onclick='playAud()'>audio</button> -->
	<a href="javascript:playAud();" controls>audio</a>
	</body>
	</html>