Javascript flowplayer一页多搜索按钮

我在一个页面中有两个视频，每个视频都有搜索按钮，但当我在第一个视频上单击搜索按钮时，第二个视频也有效。但是，当我在第二个视频中单击seek按钮时，它工作正常，所以我希望每个视频都是独立的

flowplayer(function(api, root) {

$(".rewind").click(function (rebtn) {
  if (api.playing) {
    //var target = $(this).attr("id") == "forward" ? 3 : -3;

     var target = document.getElementById(jQuery(rebtn).closest('div.video-container').find('video.myvideo').attr('id'))  == "forward" ? -3 : -3;

    api.seek(api.video.time + target);
  }  
});

$(".forward").click(function (fwtn) {
  if (api.playing) {
    //var target = $(this).attr("id") == "forward" ? 3 : -3;
         var target = document.getElementById(jQuery(fwtn).closest('div.video-container').find('video.myvideo').attr('id'))  == "forward" ? 3 : 3;

    api.seek(api.video.time + target);
  }  
});

});








<div class="video-container">
            <div class="flowplayer player">
                  <video class="myvideo" id="myvideo">
                <source type="video/mp4" src="flow/1.mp4"/>
              </video>
                <div class="buttons">
                <a href="#" class="forward">forward</a>
                <a href="#" class="rewind">rewind</a>
                </div>
                  <div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
                </div>

          </div>



<div class="video-container">
            <div class="flowplayer player">
                  <video class="myvideo" id="myvideo1">
                <source type="video/mp4" src="flow/1.mp4"/>
              </video>
                <div class="buttons">
                <a href="#" class="forward">forward</a>
                <a href="#" class="rewind">rewind</a>
                </div>
                  <div class="endscreen"> <a class="fp-toggle">Play it Again</a> </div>
                </div>

          </div>

flowplayer（函数（api，根）{
$（“.rewind”）。单击（函数（rebtn）{
如果（api.playing）{
//var target=$（this）.attr（“id”）==“forward”？3:-3；
var target=document.getElementById（jQuery（rebtn）.closest（'div.video-container'）.find（'video.myvideo'）.attr（'id'））=“forward”？-3:-3；
api.seek（api.video.time+target）；
}  
});
$（“.forward”）。单击（函数（fwtn）{
如果（api.playing）{
//var target=$（this）.attr（“id”）==“forward”？3:-3；
var target=document.getElementById（jQuery（fwtn）.closest（'div.video-container'）.find（'video.myvideo'）.attr（'id'））=“forward”？3:3；
api.seek（api.video.time+target）；
}  
});
});
再玩一遍

您的flowerplayer功能运行两次，每个视频运行一次；因此，您将使用class.rewind/.forward将单击处理程序绑定到所有按钮两次

您可以使绑定更具体，如下所示：

$(root).on("click", ".rewind", function (rebtn) {...

这样，每次运行该函数时，它只会向应用于该播放机的回放/前进按钮添加一个处理程序

您也可以简化为一个处理程序：

flowplayer(function (api, root) {
    $(root).on("click", ".rewind, .forward",function (rebtn) {
        if (api.playing) {
            var target = $(this).hasClass("forward") ? 3 : -3;
            api.seek(api.video.time + target);
        }
    });
});

工作