Untitled

// index.html

<!doctype html>
<html>
<body>
<script>
/**
 * La version propre, inactive
 */
function play(videoId)
{
	/*
	Ici, réinitialisation du squelette pour montrer que ça charge
	*/
	var videosSrcs = [
		'',
		'https://www.w3schools.com/html/mov_bbb.mp4',
		'https://sample-videos.com/video123/mp4/360/big_buck_bunny_360p_1mb.mp4',
		'http://techslides.com/demos/sample-videos/small.mp4'
	];
	var iframe = document.getElementById('myIframe');
	var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
	iframeDocument.getElementById('myVideo').src = videosSrcs[videoId];
	iframeDocument.getElementById('myVideo').play()
	/*
	Et là, tu as le temps de faire toutes les modifs que tu veux sur le reste de l'iframe.
	*/
}

/**
 * La version crade, mais qui fonctionne et ne demande quasiment pas de taf
 */
function playQnD(videoId)
{
	var iframe = document.getElementById('myIframe');

	var request = new XMLHttpRequest();
	request.open('GET', './videos/' + videoId + '.html', false);
	request.send(null);

	if (request.status === 200)
	{
		var iframe = document.getElementById('myIframe');
		var iframeDocument = iframe.contentDocument || iframe.contentWindow.document

		iframeDocument.open();
		iframeDocument.write(request.responseText);
		iframeDocument.close();

		iframeDocument.getElementById('myVideo').play()
	}
}


</script>
	<button onclick="playQnD(1);">Play 1</button>
	<button onclick="playQnD(2);">Play 2</button>
	<button onclick="playQnD(3);">Play 3</button>
	<iframe src="about:blank" id="myIframe" style="width:1000px; height:500px;"></iframe>
</body>
</html>


// Trois fichiers dans un sous-dossier "videos", pour tester

// videos/1.html
<!doctype html>
<html>
	<body>
		<video id="myVideo" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
		<button onclick="document.getElementById('myVideo').play()">Play</button>
	</body>
	<script>
		console.log('1.html loaded');
	</script>
</html>


// videos/2.html
<!doctype html>
<html>
	<body>
		<video id="myVideo" src="https://sample-videos.com/video123/mp4/360/big_buck_bunny_360p_1mb.mp4"></video>
		<button onclick="document.getElementById('myVideo').play()">Play</button>
	</body>
	<script>
		console.log('2.html loaded');
	</script>
</html>


// videos/3.html
<!doctype html>
<html>
	<body>
		<video id="myVideo" src="http://techslides.com/demos/sample-videos/small.mp4"></video>
		<button onclick="document.getElementById('myVideo').play()">Play</button>
	</body>
	<script>
		console.log('3.html loaded');
	</script>
</html>