有多个按钮，视频时播放特定的视频文件

Question

问题

我有四个div，每个div都有自己的视频文件和按钮。

• 现在，它的编码方式仅适用于一个文件，但不幸的是，并非所有文件都适用。
• 我尝试使用.each和元素的索引，但是我一直遇到.pause() was not a function
的问题

Codepen

https://codepen.io/onlyandrewn/pen/NBvPjx

客观

• 单击某个组的按钮应播放该组的特定视频文件

scripts.js

    $(function(){

   function playVideo() {

            var video = $(".video--inline")[0];

            if (video.paused) {
                video.play();
                video.muted = false;
            } else {
                video.pause();
                video.muted = true;
            }

            // Loads the clip again, so that it reverts back to the poster image
            video.addEventListener("ended", function(){
                video.load();

                $("button").find("i").removeClass("fa-pause");
                $("button").find("i").addClass("fa-play");
            });
        }

        $("button").click(function(){
            playVideo();
        });
    });

index.html

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-1.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-2.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

Answer 1

将click事件传递给您的playVideo函数，然后将视频定位如下：
var video = $(e.target).closest('.group').find('video')[0];

    $(function(){

   function playVideo(e) {

            var video = $(e.target).closest('.group').find('video')[0];

            if (video.paused) {
                video.play();
                video.muted = false;
            } else {
                video.pause();
                video.muted = true;
            }

            // Loads the clip again, so that it reverts back to the poster image
            video.addEventListener("ended", function(){
                video.load();

                $("button").find("i").removeClass("fa-pause");
                $("button").find("i").addClass("fa-play");
            });
        }

        $("button").click(playVideo);
    });

.group {display:inline-block; width:20vw}
video {width:20vw}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-1.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-2.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-3.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

<div class="group">
  <video src="https://gia.guim.co.uk/2013/10/nsa-decoded/html/asset/video/p1/p1-5.webm" class="video--inline"></video>

  <div class="button__wrapper">
    <button>Listen</button>
  </div>
</div>

更新 我们正在将函数名称作为参数传递给点击处理程序：
$("button").click(playVideo)
因此，单击时将调用playVideo，并且将单击Event对象作为参数（我们称为playVideo）传递给e：function playVideo(e)。 br /> e.target是单击的元素（按钮）。

然后我们从按钮移至相应的video。