一页中的 flowplayer 多搜索按钮

Question

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

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>

Answer 1

您的 flowerplayer 函数运行ning 两次，每个视频一次；因此，您将点击处理程序绑定到具有 class .rewind/.forward 两次的所有按钮。

您可以像这样使绑定更具体：

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

这样，每次函数运行，它只会添加一个处理程序到适用于该播放器的rewind/forward个按钮。

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

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);
        }
    });
});

Working DEMO

一页中的 flowplayer 多搜索按钮

flowplayer multi seek buttons in one page

javascript

jquery

jquery-ui

jquery-plugins

jquery-mobile