将 Play Toggle 与视频播放器连接起来

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。在绑定函数时同时使用两者会容易得多。

将 Play Toggle 与视频播放器连接起来

Connecting Play Toggle with Video players

video

jquery

toggle

video.js