index.html

<html>
	<head>
		<title>Player</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
		<script>
			function play()
			{
				if(document.getElementById("player").children[0].nodeName=="TEXTAREA")
				{
					document.getElementById("player").innerHTML  =
						"<video controls><source src='" + 
						document.getElementById("player").children[0].value.trim() + 
						"'></video>";
					
					document.getElementById("control").innerText = "RESET";
				}
				else
				{
					document.getElementById("player").innerHTML  = "<textarea></textarea>";
					document.getElementById("control").innerText = "PLAY";
				}
			}
		</script>
		<style>
			textarea, video
			{
				height: 50%;
				width: 100%;
			}
			div, button
			{
				font-size: 100px;
				text-align: center;
			}
		</style>
	</head>
	<body>
	<div id="player"><textarea></textarea></div>
	<br><br><br>
	<div>
		<button id="control" onclick="play()">PLAY</button>
	</div>
	</body>
</html>