HTML5 and Javascript - Multiple Play/Pause Videos

Asked

Viewed 808 times

0

Talk personal all right? I have a page where I have 2 videos in HTML5, I’m not even using another player. I would like to know how I can make it so that when I click on a video and others don’t all play at the same time.

In my thinking head would be a function that identifies if the video was clicked, if it is running and or and has already been finished playing it.

On the NET I tried to search in English something but without success, I saw many codes and no ideas.

I thank you from my heart if any STACK OVER NINJA can give me a boost with this!

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Video</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body class="bg-light">
  <div class="container pt-4">
  
    <div class="row">
      <div class="col-sm-7 text-center mx-auto">
        <h1 class="text-uppercase">Vídeos Exemplos</h1>
        <hr>
      </div>
    </div>
    
    <div class="row">
      <div class="col-sm-6 pt-3">
        <video controls class="w-100 meus_videos">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
        <h3>Video 01</h3>
      </div>

      <div class="col-sm-6  pt-3">
        <video controls="" class="w-100 meus_videos">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
        <h3 class="text-right">Video 02</h3>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

javascript html5 html5-video

  • See if I understand what you want: do you have 3 videos, and always play one at a time? Is that it? Never let more than one video be playing?

  • Hello friend, exactly, well that I need. Had a friend who even commented an example but it was not exactly what I needed...

1 answer

1


In all videos you add the class standing still:

<video controls class="w-100 meus_videos parado">

Whenever you start running a video with the class standing still, you fire an event:

$('.parado').on('play', function() {

This event executes a loop that takes all videos that have the class *spinning and pause the video:

$(".rodando").each(function(){
    $(this).removeClass('rodando').addClass('parado');
    $(this).get(0).pause();
});

After pausing the video, the class is assigned spinning for the video that was clicked and is given play in this video:

$(this).removeClass('parado').addClass('rodando');
$(this).get(0).play();

Follows full code:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Video</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body class="bg-light">
  <div class="container pt-4">

    <div class="row">
      <div class="col-sm-7 text-center mx-auto">
        <h1 class="text-uppercase">Vídeos Exemplos</h1>
        <hr>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6 pt-3">
        <video controls class="w-100 meus_videos parado">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
        <h3>Video 01</h3>
      </div>

      <div class="col-sm-6  pt-3">
        <video controls="" class="w-100 meus_videos parado">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            </video>
        <h3 class="text-right">Video 02</h3>
      </div>

    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>  
        $( document ).ready(function($) {
            $('.parado').on('play', function() {
                $(".rodando").each(function(){
                        $(this).removeClass('rodando').addClass('parado');
                        $(this).get(0).pause();
                });
                $(this).removeClass('parado').addClass('rodando');
                $(this).get(0).play();
            });
        });
    </script>
</body>

</html>

  • Very good, that’s exactly what I needed! I thank you for your time in answering and much more for the time you have spent on developing this function!

Browser other questions tagged javascript html5 html5-video

You are not signed in. Login or sign up in order to post.