How to stop videos from playing simultaneously

Wappler General How To
#1

Hi I’m new here and I’ve been using wappler for a couple of days now…
I am using wappler html5 video extension which is bound to a video from a repeat region, which is working fine with no bugs…
Now whenever i click play on another video whiles another is already playing, it doesn’t pause the one that is already playing but plays all simultaneously.

What I am trying to achieve is that when I click play on a video from the repeat region, the one that is already playing must pause.

please can someone help me achieve this because I don’t know much about JavaScript.

Media play back controls on capacitor mobile app
#2

Hi @REVEB, welcome to the Wappler Community.

Maybe not what you want, but I have a video that might help you.

#3

Hi @ben thank you for time and help. I’ve watched the video but unfortunately is not helping, in your video, the video loads in a modal and pause when close…
In my case, I don’t want the videos to be open in a modal of which I could have done it using wappler data detail component.
please this is link to a demo page of what i’m talking about https://opiniongh.com/videos
if you visit the page, click the play button on the videos at the same time and you will realize they all play simultaneously which is very bad…
Thank you

#4

Here are 2 posts that will help you…

Pause a video when other video is playnig…

In your case you have a repeat, so define which video is playnig…
Which video is playing…

#5

hi @famousmag thank you for your help but still I don’t get it especially with the second post that I should define which video is playing… please forgive me for my ‘rookie’ attitude but I don’t know much about JavaScript so please kindly help me understand better…
this is my code:

  <div class="row mb-3">
    <div class="col-9 offset-3">
      <input id="video_search" name="search" type="search" class="form-control form-control-lg" placeholder="Search Videos">
    </div>
  </div>
  <div class="row" is="dmx-repeat" id="videos_repeat" dmx-bind:repeat="videos_serverconnect.data.query.data">
    <div class="text-center col-12 col-sm-6 col-xl-3 col-lg-4 mb-4">

      <video is="dmx-video" id="videos" width="100%" autopause="true" dmx-bind:src="'http://localhost:8050/'+video" controls="true" height="65%"></video>
      <h5>{{v_title}}<br></h5>
    <p>{{v_short_desc}}</p></div>
  </div>
#6

No problem my friend,

This 2nd post from Tom has captured my attention and trying to find a case to use it!
I can’t make it to work in our case. My apologies for that…

Another way is Javascript:

  1. This is the repeat containing a dmx-video:
        <div class="row align-items-center">
            <div class="col align-self-center">
                <div class="row" is="dmx-repeat" id="repeatVideos" dmx-bind:repeat="srvc_getVideos.data.qr_getVideos">
                    <div class="col-6 text-center">
                        <video class="myvideo" is="dmx-video" id="video" dmx-bind:id="'video' + $index" dmx-bind:src="'assets/images/'+vid_link" controls="true" dmx-bind:width="400" dmx-on:play="run({runJS:{function:'pauseAllVideos',outputType:'text'}})"></video>
                    </div>
                </div>
            </div>
        </div>

make sure to give the video a class="myvideo" (or whatever class name you want but make sure to change it also in the next step

  1. add this code inside the head just before the </head> 
/* before the end head tag: /*
<script type="text/javascript">
        function pauseAllVideos() {
            
            document.querySelectorAll(".myvideo").forEach((el) => {
                el.onplay = function(e){
                    // pause all the videos except the current.
                    document.querySelectorAll(".myvideo").forEach((el1) => {
                        if(el === el1)
                            el1.play();
                        else
                            el1.pause();
                    });
                }
            });
        }
    </script>
</head>
2 Likes
#7

Thank you very much @famousmag this solved the issue like magic… I really appreciate your help

1 Like