Question

我使用HTML5视频播放器和自定义控件按钮。这是我的HTML结构：

<video width="840" id="video">

                  <source src="{{box.video}}" type="video/mp4">

                  </video>
                  <div class="controls">
                    <button class="play" ><i class="fa fa-play" aria-hidden="true"></i></button>

JS代码：

 $(".play").click(function() {
              $(this).closest("video")[0].play();
            });

当我点击播放按钮时，它会收到未定义的错误。有什么问题？我该如何解决？

Answer 1

问题是因为video不是点击的.play按钮的父级。根据您的HTML示例，您需要使用closest()获取.controls div，然后使用prev()获取视频，如下所示：

$(".play").click(function() {
  $(this).closest('.controls').prev('video')[0].play();
});

<video width="840" id="video">
  <source src="{{box.video}}" type="video/mp4">
</video>
<div class="controls">
  <button class="play">
    <i class="fa fa-play" aria-hidden="true"></i>
  </button>
</div>

玩这个＆＃39;使用jQuery的父视频

1 个答案: