JavaScript-Registerkarten mit Sitzungen

Question

Ich bin mir nicht sicher, wie das zu beschreiben ist. Ich brauche Tabs mit Video Player Embed Codes. Zum Beispiel habe ich zwei Registerkarten: tab1 und tab2. Beide Registerkarten zeigen den Videoplayer, wenn der Benutzer auf Tab1 klickt und Video abspielt, und ohne anzuhalten klickt dieser Benutzer auf Tab2 und spielt Video ab, das sich in Tab2 befindet, aber Tab1 spielt auch ein Video. Brauchen Sie Hilfe, um Tab1-Player automatisch zu stoppen, wenn der Benutzer den Tab wechselt.

Answer 1

Wenn Ihre Tabs Tasten sind, können Sie

$('.tab1 + button').on('click', function() { //Selects button immediately after `<div class="tab1">` 
    var video = $('.tab2 video')[0]; //Get first <video> in selection as DOM Element so that we can use the `pause` function on it 
    video.pause() 
    //Play the video from tab 1 
    $('.tab1 video')[0].play(); 
}); 

verwenden Dieser wählt Elemente mit einer Klasse von tab1 und hält die <video> von tab2

$('.tab2 + button').on('click', function() { //Selects button immediately after `<div class="tab2">` 
    var video = $('.tab1 video')[0]; 
    video.pause() 
    //Play the video from tab 2 
    $('.tab2 video')[0].play(); 
}); 

Dies wählt Elemente mit einer Klasse von tab2 und pausiert die <video> von tab1

Der Grund, warum ich $('.tab1 video')[0] statt $('.tab1 video')$('.tab1 video') verwende, ist, weil das [x] (wobei x = 0 oder irgendein Index) das jQuery-Objekt in ein normales JavaScript-DOM-Element konvertiert, so dass Sie .play() und .pause() darauf aufrufen können. Sie können die oben Javascript verwenden, wenn Ihr Markup

etwas ähnlich ist

<div class="tab1"> 
    <video src="myvideo.mp4"></video> 
</div> 
<button>Open tab 1</button> 

<div class="tab2"> 
    <video src="myvideo.mp4"></video> 
</div> 
<button>Open tab 2</button> 

Wo die Laschen sind <div> Elemente und Ihre Tasten sind unmittelbar nach der Registerkarte, dass die Taste geöffnet werden soll (wegen der + Wähler, die ich verwendet) Bitte include your HTML damit ich das besser beantworten kann.