CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Dark_Witcher
Dark_Witcher

Reputation: 38

How to link two videos in a website to play at the same time on hover with javascript?

So I am helping my gf with her Uni project. She is a graphic designer and she needed some help with creating a webpage with a video comics. I made it so that the videos would play on hover with Javascript (this is the first time ever I had to use JS) and now I need a way to bind some of them together - e.g. you hover on one or the other and both play, you remove the mouse and both stop. And I need to do it several times. The website will contain a total of 24 Videos.

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script>
      $(document).ready(function() {
        $('.video').each(function() {
          $(this).on("mouseover", function(e) { hoverVideo(e); });
          $(this).on("mouseout", function(e) { hideVideo(e); });
        });
      });
      function hoverVideo(i) {
          i.target.play();
      }
      function hideVideo(i) {
          i.target.pause();
      }
  </script>
</head>
<body>
  <div class="main">
    <h3>Title</h3>
    <p>
      *Hover over each frame to see the story.
    </p>
  </div>
  <div class="main">
    <div class="firstrow">
      <div class="video" id="one" >
        <video class="thevideo" loop>
          <source src="Resources/1.mp4" type='video/mp4' />
        </video>
      </div>
      <div class="video" id="one" >
        <video class="thevideo" loop>
          <source src="Resources/2.mp4" type='video/mp4' />
        </video>
      </div>
      <div class="video" id="one" >
        <img src="Resources/text/tap.svg"  />
      </div>
    </div>
  </div>
</body>

Upvotes: 2

Views: 101

Answers (2)

Zze
Zze

Reputation: 18805

At the moment you are only calling the function on 1 video - the video that triggered the event i.target.play();

So you just need to toggle pause and play on all videos inside .firstrow instead:

$(".firstrow .video").on("mouseenter", ()=>{
  $(".firstrow video").each((index, video)=>{
    video.play();
  });
});

$(".firstrow .video").on("mouseleave", ()=>{
  $(".firstrow video").each((index, video)=>{
    video.pause();
  });
});

Upvotes: 0

repzero
repzero

Reputation: 8412

I would go with mouse enter and leave events to avoid redudancy of triggering the execution everytime your mouse is inside the video with movements

$(".thevideo").mouseenter(function(){
  console.log("mouse is entered");
  $(".thevideo").each(function(){
    this.play();
  })
})
$(".thevideo").mouseleave(function(){
  $(".thevideo").each(function(){
    this.pause()
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script>
      $(document).ready(function() {
        $('.video').each(function() {
          $(this).on("mouseover", function(e) { hoverVideo(e); });
          $(this).on("mouseout", function(e) { hideVideo(e); });
        });
      });
      function hoverVideo(i) {
          i.target.play();
      }
      function hideVideo(i) {
          i.target.pause();
      }
  </script>
</head>
<body>
  <div class="main">
    <h3>Title</h3>
    <p>
      *Hover over each frame to see the story.
    </p>
  </div>
  <div class="main">
    <div class="firstrow">
      <div class="video" id="one" >
        <video class="thevideo" loop>
          <source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
        </video>
      </div>
      <div class="video" id="one" >
        <video class="thevideo" loop>
          <source src="https://www.w3schools.com/tags/movie.mp4" type='video/mp4' />
        </video>
      </div>
      <div class="video" id="one" >
        <img src="Resources/text/tap.svg"  />
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions