连接视频播放器的播放切换

Question

对于一个客户，我正在考虑在主页上使用自定义元素的视频播放器。我想将这些自定义按钮与我的视频播放器连接起来。例如，如果点击了播放按钮，就会开始播放视频。否则就会暂停视频。

我在下面用/注释了我的想法。也许这样的东西会有用。

到目前为止，我尝试了几件事，最后一件事是这样的，但到目前为止我还没有任何成功。也许你们中的一个人可以帮助我？

任何帮助都将是非常感激的!

$('video').each(function (index) {
    //var $(this) = videoplayer
    $('.play-toggle').click(function () {
        if ($(this).hasClass('playvideo')) { //&& var.paused
            //var.play()
            console.log($(this))
            $(this).removeClass('playvideo');
            $(this).find('.play').css({
                "visibility": "hidden",
            });
            $(this).find('.pause').css({
                "visibility": "visible",
            });
        } else {
            $(this).addClass('playvideo');
            //var.pause()
            $(this).find('.play').css({
                "visibility": "visible",
            });
            $(this).find('.pause').css({
                "visibility": "hidden",
            });
        }
    });
});

Answer 1

考虑下面的例子。

$('video').each(function(i, el) {
  var p = $(el).parent();
  $('.play-toggle', p).click(function(e) {
    var button = $(this);
    console.log(button[0]);
    if (button.hasClass('playvideo')) {
      button.removeClass('playvideo');
      $('.play', button).hide();
      $('.pause', button).show();
      el.play();
      console.log($(el).attr("id") + " is playing.");
    } else {
      button.addClass('playvideo');
      $('.play', button).show();
      $('.pause', button).hide();
      el.pause();
      console.log($(el).attr("id") + " is paused.")
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video-player">
  <video id="video1" width="420" style="border: 1px solid #000; background-color: #222;">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML video.
  </video>
  <div class="controls">
    <button class="play-toggle playvideo">
    <span class="play">Play</span>
    <span class="pause" style="display: none;">Pause</span>
    </button>
  </div>
</div>

我切换到 .show().hide() 因为这比改变 visible. .each() 接受两个参数。index 和 element. 在绑定函数时，使用这两种方法可以方便很多。