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>的{{1}}

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的{{1}}

我使用<video>而非tab1的原因是因为包含[x]（其中x = 0或任何索引）将jQuery对象转换为普通的JavaScript DOM元素，以便您可以在其上调用$('.tab1 video')[0]和$('.tab1 video')。如果你的标记与

有些相似，你可以使用上面的javascript

.play()

选项卡是.pause()个元素，并且您的按钮紧跟在按钮应该打开的选项卡之后（因为我使用的<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>选择器）请include your HTML以便我能更好地回答这个问题。

带有会话的JavaScript选项卡

1 个答案: