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

Question

问题

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

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

代码笔

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).
e.target是被点击的元素（按钮）。

然后我们从按钮遍历到对应的video。