Reputation: 2364
I thought this would be simple to set up with a click event, but the it's not recognizing the html5 video's controls as part of the video.
There is another video on the page with the ID of video1 that is set to autoplay. The second video with the ID of video2 does not overplay, but has html5 controls so the viewer can start it. I'd like to have it set up so that once the play button in video2 is selected that video1 stop playing.
Here's what I've tried:
html
<video id="video2" controls>
<source src="assets/explainer.mp4" type="video/mp4">
This browser does not support HTML5 video
</video>
js
$('#video2').click(function(){
$('#video1').get(0).pause();
});
Note that if I click on the video it works, but click on the controls does not.
Upvotes: 1
Views: 8920
Reputation: 1
if you're having more than two video you can do this, it works fine for me
const HandlePause = () => {
const player = document.getElementsByTagName('video')
for (let x = 0; x < player.length; x++) {
if (player[x] !== e.target) {
player[x].pause()
}
}
}
<video controls onPlay={HandlePause}">
<video controls onPlay={HandlePause}">
<video controls onPlay={HandlePause}">
Upvotes: 0
Reputation: 1
I faced the same problem and solved it with this code snippet below I have written where (.video) represents the class name of your video.
<script>
$("video").on("play", function (e) {
$('.video').not(this).each(function(){
var $playpause = $(this);
video = $playpause[0];
video.pause();
});
});
</script>
Upvotes: 0
Reputation: 559
worked for videos and sounds
html >>
<audio class="player" controls>
<source src="{{$sound->path}}" type="audio/ogg">
<source src="{{$sound->path}}" type="audio/mpeg">
</audio>
<video class="player" style="max-width: 100%" controls>
<source src="{{$video->path}}" type="video/mp4">
<source src="{{$video->path}}" type="video/ogg">
</video>
script >>
<script>
$(document).ready(function () {
function playFile() {
$(".player").not(this).each(function () {
$(this).get(0).pause();
});
this[this.get(0).paused ? "play" : "pause"]();
}
$('.player').on("click play", function() {
playFile.call(this);
});
})
</script>
Upvotes: 3
Reputation: 172
You can listen to onplay event:
var vid1 = document.getElementById("video-1");
var vid2 = document.getElementById("video-2");
vid1.onplay = function() {
vid2.pause();
};
Hope you can take it from here :)
You may check all evets that you can listen to on video element here (just hit play / pause and see the table updates): https://www.w3.org/2010/05/video/mediaevents.html
Upvotes: 0
Reputation: 205979
// You heard about classes
$(".allMyVideos").on("click", function() {
// All but not this one - pause
$(".allMyVideos").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
Or if you have two ID videos:
var $v1$v2 = $("#video1, #video2");
$v1$v2.on("click", function() {
// ...not this one - pause
$v1$v2.not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
Upvotes: 2
Reputation: 904
the video element supports it's own events. playing is one of them, and alerts you when a video starts playing, either autoplay or when the play button is pressed after pause. You should be able to listen for it instead of the click event.
Upvotes: 1