Skip to content

Instantly share code, notes, and snippets.

@tomer

tomer/sync-multiple-html5-videos.html

Created January 13, 2020 12:39
Show Gist options
  • Save tomer/43c7f05c4bb642748cb83aa602a599a5 to your computer and use it in GitHub Desktop.
Save tomer/43c7f05c4bb642748cb83aa602a599a5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sync-multiple-html5-videos.html
<!doctype html>
<html>
<head>
<script type="text/javascript">
function playButton() {
const players = [];
for (const p of ['video1', 'video2', 'video3']) players.push(document.getElementById(p));
const paused = players[0].paused;
for (const p of players) paused? p.play(): p.pause();
}
</script>
</head>
<body>
<video width="250" id='video1' onClick='playButton()'>
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
</video>
<video width="250" id='video2' onClick='playButton()'>
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/webm">
</video>
<video src='https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4'
poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
width="620"
id='video3' onClick='playButton()'></video>
<!--div>
<button id="playerButton" onClick="playButton()">Play</button>
</div-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment