Skip to content

Instantly share code, notes, and snippets.

@BrandonDavidDee
Created July 31, 2018 17:19
Show Gist options
  • Save BrandonDavidDee/53921da94ff1abec04dd587e737412e0 to your computer and use it in GitHub Desktop.
Save BrandonDavidDee/53921da94ff1abec04dd587e737412e0 to your computer and use it in GitHub Desktop.
Tiny Javascript script that pauses a playing html5 video once another video begins playing
<div class="row">
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<video onplay="pauseAll(story1)" id='story1' controls>
<source src="story1.mp4" type="video/mp4">
</video>
</div><!-- card body -->
</div><!-- card -->
</div><!-- col -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<video onplay="pauseAll(story6)" id='story6' controls>
<source src="story6.mp4" type="video/mp4">
</video>
</div>
</div>
</div><!-- col -->
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<video onplay="pauseAll(story3)" id='story3' controls>
<source src="story3.mp4" type="video/mp4">
</video>
</div>
</div>
</div><!-- col -->
</div><!-- row -->
<script>
var htmlPlayer = document.getElementsByTagName('video');
function pauseAll(id) {
for (var i = 0; i < htmlPlayer.length; i++) {
if (htmlPlayer[i] === id) {
htmlPlayer[i].play();
} else {
htmlPlayer[i].pause();
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment