带有会话的JavaScript选项卡

Question

我不确定如何描述此问题。我需要带有视频播放器嵌入代码的选项卡。例如，我有两个选项卡：tab1和tab2。当用户点击tab1并播放视频时，两个选项卡都会显示视频播放器，并且不停止此用户单击tab2并播放tab2中的视频，但是tab1中也有一个视频正在播放。当用户切换选项卡时，需要帮助来自动停止tab1播放器。

Answer 1

如果您的选项卡按钮，您可以使用

$('.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(); 
}); 

这将选择一类的tab1元素并暂停<video>从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(); 
}); 

这将选择元素与类的tab2和暂停<video>从tab1

，我使用$('.tab1 video')[0]，而不是仅仅$('.tab1 video') 的原因是因为包括在其上的[X]（其中x = 0或任何索引）转换jQuery对象为正常的JavaScript DOM元素，这样就可以调用.play()和.pause()。 您可以使用以上的JavaScript您的标记是否有点类似

<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> 

当标签是<div>元素，你的按钮标签按钮应打开（因为+选择，我用后立即有） 请include your HTML这样我可以更好地回答这个问题。