CODEWITHSUNDEEP
javascripthtmljqueryvideo
SavPhill
SavPhill

Reputation: 655

Stop a video when another one is clicked

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

Answers (5)

Maks Razumovsky
Maks Razumovsky

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

Programmerabc
Programmerabc

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

Yohanes Gultom
Yohanes Gultom

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

Jintor
Jintor

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

Related Questions