一页中的flowplayer多搜索按钮

Question

I have 2 videos in one page and each video have seek buttons but when I click on seek buttons on the first video the second video also effective. but when I click on the seek buttons in the second video it's working fine, so I want each self-contained independent video

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

Your flowerplayer function is running twice, once for each video; therefore, you are binding the click handler to all buttons with class .rewind/.forward twice.

You could make your binding more specific like this:

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

In this way, each time the function is run, it will only add a handler to the rewind/forward buttons that apply to this player.

You could also probably simplify to one handler:

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