javascript - 当有多个按钮、视频时播放特定视频文件

Question

问题

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

• 目前，它的编码方式仅适用于一个文件，但不幸的是不适用于所有文件。
• 我尝试过使用 .each 并使用元素的索引，但我一直遇到 .pause() 不是函数的问题<

代码笔

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

目标

• 点击群组的按钮应播放该群组的特定视频文件

脚本.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): 函数 playVideo(e)。
e.target 是被点击的元素(按钮)。

然后我们从按钮遍历到相应的视频。