Reputation: 655
I have two locally hosted videos on the same page. I am trying to stop one once another is clicked, but it does not work.
<div class="banner has-hover has-video is-full-height is-selected" id="banner-1353813713" style="position: absolute; left: 0%;">
<div class="banner-inner fill">
<div class="banner-bg fill">
<div class="bg fill bg-fill "></div>
<div class="video-overlay no-click fill visible"></div>
<video class="video-bg fill visible" preload="" playsinline="" autoplay="" muted="" loop=""> <source src="https://www.exampledomain/video1.mp4" type="video/mp4"></video> </div>
<div class="banner-layers container">
<div class="fill banner-link"></div>
<div id="text-box-585511097" class="text-box banner-layer x10 md-x10 lg-x10 y35 md-y35 lg-y35 res-text">
<div class="text-box-content text dark">
<div class="text-inner text-center">
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>View Video</span> </a>
<a href="/offers/" target="_self" class="button white is-outline is-large offersbutton hidden" style="border-radius:1px;">
<span>Offers</span></a>
<div class="video-button-wrapper" style="font-size:70%"><a href="https://www.exampledomain/video2.mp4" class="button open-video icon circle is-outline is-xlarge"><i class="icon-play" style="font-size:1.5em;"></i></a></div>
<p>Click to view full video</p>
</div>
</div>
I have tried listening to the classes onlick, but it has not worked:
<script>
$(".video-bg fill visible").on("click", function() {
// All but not this one - pause
$(".video-bg fill visible").not( this ).each(function() {
this.pause();
});
// Play this one
// this.play();
// Or rather toggle play / pause
this[this.paused ? "play" : "pause"]();
});
</script>
Upvotes: 5
Views: 4237
Reputation: 11
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play", onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Upvotes: 0
Reputation: 1
You can do this by taking the video tag and the pause method.
function videoone() {
document.getElementById("videotwo").pause();
document.getElementById("videothree").pause();
document.getElementById("videofour").pause();
}
In the code above, the name of the verb related to onplay is in the video tag
Upvotes: 0
Reputation: 327
If you only want that one video should pause when another is played this might help. Note: I am not using any style except for video's height and width . This code rely on onplay call from html and pause()
function playVideo1() {
document.getElementById('video2').pause();
}
function playVideo2() {
document.getElementById('video1').pause();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stop either</title>
<style>
#video1 {
height: 200px;
width: 200px;
float: left;
}
#video2 {
height: 200px;
width: 200px;
float: right;
}
</style>
</head>
<body>
<video controls id="video1" onplay="playVideo1();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></video>
<video controls id="video2" onplay="playVideo2();"><source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"></video>
<script type="text/javascript" src="a.js"></script>
</body>
</html>
Video are from here and here i am not responsible for them.
Upvotes: 3
Reputation: 3842
Here is a simple POC using vannila JS relying on play
event. You can also use load()
instead of pause()
to start the video from beginning (instead of just pausing).
Reference https://www.w3schools.com/tags/ref_av_dom.asp
// assume only one video is playing at a time
var videoPlaying = null;
const onPlay = function() {
if (videoPlaying && videoPlaying != this) {
videoPlaying.pause()
}
videoPlaying = this
}
// init event handler
const videos = document.getElementsByClassName("video-bg")
for (let i = 0; i < videos.length; i++) {
videos[i].addEventListener("play", onPlay)
}
<video id="video-1" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<video id="video-2" class="video-bg" width="320" height="240" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Upvotes: 4
Reputation: 657
Hi tested a theory but you'll have to create buttons to play/pause
theory => do a .each on all video tags
this code below : when you click the words PLAY => it will pause the other video if it's playing
like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" ></script>
<script>
function pause_all_videos () { $("video").each(function() { this.pause(); }); }
function playonly (vid) { pause_all_videos(); document.getElementById(vid).play(); }
</script>
<style>
div{padding:3px;margin:3px;}
</style>
<div>
<video id="v1" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" ></video>
<div><span onclick="playonly('v1');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
<hr>
<div>
<video id="v2" controls src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4" ></video>
<div><span onclick="playonly('v2');" >PLAY</span> ----- <span onclick="pause_all_videos();" >PAUSE</span></div>
</div>
Upvotes: 2