flowplayer 在一页中的多搜索按钮

Posted 2023-05-09

【中文标题】flowplayer 在一页中的多搜索按钮

【英文标题】：flowplayer multi seek buttons in one page

【发布时间】：2016-01-15 04:54:32

【问题描述】：

我在一页中有 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>

【参考方案1】：

您的flowerplayer 函数运行了两次，每个视频运行一次；因此，您将单击处理程序绑定到所有具有 .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);
        
    );
);

工作DEMO