intro.html

<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
	#centerDiv{
		text-align: center;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	#introVideo{
		width: 100%;
		display: none;
	}
	
	#introVideo.visible{
		display: block;
	}
	
	#hint{
		display: none;
	}
	
	#hint.visible{
		display: block;
	}
	
	#startButton{
		display: none;
	}
	
	#startButton.visible{
		display: block;
	}
</style>
</head>

<body>
<div id="centerDiv">
	<video controls id="introVideo">
		<source src="./intro.mp4" type="video/mp4" autoplay>
		Your browser does not support the video tag.
	</video>
	<div id="startButton" class="visible">
		<p>Nechť hra započne! Pusťte si video!</p>
	</div>
	<div id="hint">
		<p>V konzoli otevřete náš chat, kde naleznete jak pokračovat dále. Poradíme vám, hledejte na objektu $owidget</p>
	</div>
</div>

<script type="text/javascript">
(function () {
  var scr = document.createElement('script'); scr.type = 'text/javascript'; scr.async = true; scr.charset = 'UTF-8';
  scr.src = '//app.mluvii.com/widget/OOWidget.js';
  scr.$owidgetOnLoad = function (owidget) {
    if (!owidget.isSupported) { return; }
    owidget.init("295b1064-cf5b-4a5d-9e05-e7a74f86ae5e", "Nabor");
    owidget.connectToServer();
  };
  var ffs = document.getElementsByTagName('script')[0]; ffs.parentNode.insertBefore(scr, ffs);
})();

  document.getElementById('introVideo').addEventListener('ended',videoEndedHandler,false);
    function videoEndedHandler(e) {
        document.getElementById('introVideo').classList.remove("visible");
		 document.getElementById('hint').classList.add("visible");
    }
	
   document.getElementById('startButton').addEventListener('click',startClicked,false);
    function startClicked(e) {
       document.getElementById('introVideo').classList.add("visible");
	    document.getElementById('startButton').classList.remove("visible");
    }	
</script>

</body>
</html>