Play one video at a time on html page


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.


Vanilla js here.

<pre class="snippet-code-js lang-js prettyprint-override">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(); } } } <pre class="snippet-code-html lang-html prettyprint-override"><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>


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:

<pre class="snippet-code-js lang-js prettyprint-override">$(function(){ $("#video1").on("play",function(){ $("#video2").trigger("pause"); }); $("#video2").on("play",function(){ $("#video1").trigger("pause"); }); }); <pre class="snippet-code-html lang-html prettyprint-override"><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>


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


  • Check precision to nth decimal place?
  • Confusion with the order of execution when `next` with `unless` in ruby
  • Javascript fade in fade out div with youtube video
  • Spinner in Chrome, IE9 does not become visible during synchronous ajax get request
  • Route Audio song to blue-tooth programmatically?
  • c++ create an array with string::size
  • Windows batch string manipulation in loop
  • matlab/octave random event ode45
  • How to get Apache XML-RPC 3.1.3 compliance (ISO date format along with time zone) in Java 1.6
  • Submission of new app with iAds
  • OCILogon during Grace Period - ORA-28002
  • PHP + XML - how to rename and delete XML elements using SimpleXML or DOMDocument?
  • Double dispatch in Java example
  • Why cout is producing no output on Code Blocks?
  • Multiple producers single consumer locking schema
  • Can't delete or rename original file after resizing
  • Roxygen error “Skipping invalid path”
  • D3 get axis values on zoom event
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • why do I get the error when installing the gem 'pg'? [duplicate]
  • FileReader+canvas image loading problem
  • Why value captured by reference in lambda is broken? [duplicate]
  • How to set/get protobuf's extension field in Go?
  • How to show dropdown in excel using jrxml (jasper api)?
  • Rearranging Cells in UITableView Bug & Saving Changes
  • Circular dependency while pushing http interceptor
  • Linker errors when using intrinsic function via function pointer
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • python draw pie shapes with colour filled
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?