Pause/Stop Videos into Tabs When I Clicked on a Tab

Javascript - Pause video when changing to another tab (on the same page)

You can pause all videos when one of the tabs is clicked:

function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
body {
font-family: Arial;

/* Style the tab */

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;

/* Style the buttons inside the tab */

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;

/* Change background color of buttons on hover */

.tab button:hover {
background-color: #ddd;

/* Create an active/current tablink class */

.tab {
background-color: #ccc;

/* Style the tab content */

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;

.tabcontent .video {
width: 100%;
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>

<div id="London" class="tabcontent">
<p>London is the capital city of England.</p>
<video controls>
<source src="" type="video/mp4"/>

<div id="Paris" class="tabcontent">
<p>Paris is the capital of France.</p>
<video controls>
<source src="" type="video/mp4"/>

<div id="Tokyo" class="tabcontent">
<p>Tokyo is the capital of Japan.</p>
<video controls>
<source src="" type="video/mp4"/>

Pause HTML Video on exiting a tab

You can simply loop through each video and pause it inside of your function.

Credit: How can I pause ALL videos (html5) at once?

$('ul.tabs li').click(function() { $('video').each(function() {  $(this).get(0).pause(); }); var tab = $(this).data('tab');
$('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current');
$(this).addClass('current'); $(this).parent().parent().parent().children("#"+tab).addClass('current');});
section { background: #fff;}
ul.tabs { margin: 0; padding: 0; list-style: none; background: #ccc;}
.tab-link { background: none; color: #fff; display: inline-block; padding: 10px; cursor: pointer; font-size: 16px;}
.tabs .tab-link.current { background: #ccc;}
.tab-content { display: none; background: #ccc;}
.tab-content.current { display: block;}
video { width: 100%; height: 400px;}
<script src=""></script>
<nav> <ul class="tabs"> <li class="tab-link current" data-tab="first"> <a href="#tab-1">One</a> </li> <li class="tab-link" data-tab="sec"> <a href="#tab-2">Two</a> </li> </ul> </nav>
<div id="first" class="tab-content current"> <video controls> <source type="video/mp4" src=""> </video> </div> <div id="sec" class="tab-content"> <video controls> <source type="video/mp4" src=""> </video> </div>

How to stop video in tab?

DEMO — Switching tabs pauses any playing videos.

By using the YouTube Player API, you can play/pause/stop videos.

<script src="//"></script>

<iframe width="510" height="287" src="//" frameborder="0" allowfullscreen></iframe>

$('iframe[src*="//"]').each(function(i) {
this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

Note the ?enablejsapi=1 query string appended to the YouTube embed URL in the iframe.

Pause video on Tab switch in browser but should continue Playing when minimized the browser window

document.addEventListener("visibilitychange", function() {
if (document.hidden){
console.log("Browser tab is hidden")
} else {
console.log("Browser tab is visible")

Related Topics

Leave a reply