javascript - Play one video at a time on html page - Stack Overflow

admin管理员组

文章数量:1191729

I have a html page. I have used a video tag for playing video online I have used two video tags, But when I play both videos, then both videos play at same time

I want a solution that, if I play one video and then click on the second one then the first one should be paused and the second one starts playing. Any help would be appreciated.

I have a html page. I have used a video tag for playing video online I have used two video tags, But when I play both videos, then both videos play at same time

I want a solution that, if I play one video and then click on the second one then the first one should be paused and the second one starts playing. Any help would be appreciated.

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 16, 2015 at 13:34 Danny Staple 7,31244 gold badges4545 silver badges5757 bronze badges asked Jan 16, 2015 at 12:47 user3783962user3783962 6311 gold badge11 silver badge44 bronze badges 1

• Show us your code, without code its hard to assume everything. And how can you click both video at same time when i click on both video explain this. – Manwal Commented Jan 16, 2015 at 12:48

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 17

Vanilla js here.

var videos = document.querySelectorAll('video');
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);


function pauseAll(elem){
	for(var i=0; i<videos.length; i++){
		//Is this the one we want to play?
		if(videos[i] == elem) continue;
		//Have we already played it && is it already paused?
		if(videos[i].played.length > 0 && !videos[i].paused){
		// Then pause it now
		  videos[i].pause();
		}
	}
  }

<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm" src="http://video.webmfiles.org/big-buck-bunny_trailer.webm"></source>
  <source type="video/mp4" src="http://video.webmfiles.org/big-buck-bunny_trailer.mp4"></source>
</video>


<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm" src="http://video.webmfiles.org/elephants-dream.webm"></source>
  <source type="video/mp4" src="https://archive.org/download/ElephantsDream/ed_hd.mp4"></source>
</video>

One simple solution will be using javascript. Apply play binding to the video tag. In that pause all the other video

$('video').bind('play', function (e) 
{
    var video = $('video');
    for(var i=0;i<video.length;i++)
    {
        if(video[i] != e.target)
        {
           video[i].pause();
        }
    }
});

Not sure but hope it will work for you

 // AUTO STOP WHEN CURRENT VIDEO IS PLAYING..

//JAVASCRIPT

    document.addEventListener('play', function(e){
      var videos = document.getElementsByTagName('video');
      for(var i = 0, len = videos.length; i < len;i++){
          if(videos[i] != e.target){
              videos[i].pause();
          }
      }
    }, true);
    
  ///REACT
  
 // componentDidMount() {
  //  document.addEventListener('play', function(e){
    //  var videos = document.getElementsByTagName('video');
   //   for(var i = 0, len = videos.length; i < len;i++){
     //     if(videos[i] != e.target){
      //        videos[i].pause();
      //    }
   //   }
  //  }, true);
    
 // }

<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm"   src="https://www.w3schools.com/html/mov_bbb.mp4"></source>
</video>


<video height="169" width="300" preload="none" controls="controls">
  <source type="video/webm"   src="https://archive.org/download/ElephantsDream/ed_hd.mp4"></source>
</video>

you need to monitor the video's "play" event, and when it fires you stop the other video. that way, when you play one video in whatever way, the other one will stop:

$(function(){
    $("#video1").on("play",function(){
        $("#video2").trigger("pause");
    });
    $("#video2").on("play",function(){
        $("#video1").trigger("pause");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video1" width="300" controls="" onplay="Vid1()">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

<video id="video2" width="300" controls=""><br>
  <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"><br>
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"><br>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><br>
  <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"><br>
</video>

Add

onplay="stopOtherMedia(this)" 

on all audio and video tags

function stopOtherMedia(element) {
    $("audio").not(element).each(function(index, audio) {
        audio.pause();
    });

    $("video").not(element).each(function(index, video) {
        video.pause();
    });

}

本文标签： javascriptPlay one video at a time on html pageStack Overflow