如何使用单个代码块控制多个视频答案

【问题标题】：How to control many videos with a single code block如何使用单个代码块控制多个视频
【发布时间】：2016-07-04 01:35:42
【问题描述】：

我有问题。我在 1 页中有 2 个视频。我的代码是这样的：

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="thumbnail">
        <div class="thumbnail-img">
            <div class="embed-responsive embed-responsive-16by9">
                <video id="video2">
                    <source src="video/inspiration-1.mp4" type="video/mp4">
                </video>
            </div>
            <button class="btn btn-primary play" onclick="playPause1()">
                <li class="fa fa-play"></li>
            </button>
        </div>
        <div class="caption">
            <h5 class="h5-big">HOW TO </h5>
            <a href=".detil.html" class="uppercase bold">recipe</a>
        </div>
    </div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
    <div class="thumbnail">
        <div class="thumbnail-img">
            <div class="embed-responsive embed-responsive-16by9">
                <video id="video1">
                    <source src="video/inspiration-1.mp4" type="video/mp4">
                </video>
            </div>
            <button class="btn btn-primary play" onclick="playPause()">
                <li class="fa fa-play"></li>
            </button>
        </div>
        <div class="caption">
            <h5 class="h5-big">HOW TO </h5>
            <a href=".detil.html" class="uppercase bold">recipe</a>
        </div>
    </div>
</div>

var myVideo = document.getElementById("video1");

function playPause() {
    if (myVideo.paused)
        myVideo.play();
    else
        myVideo.pause();
}

var myVideoa = document.getElementById("video2");

function playPause1() {
    if (myVideoa.paused)
        myVideoa.play();
    else
        myVideoa.pause();
}

在这段代码中，我必须添加脚本以及我所拥有的视频课程。有没有其他方法可以让我在想添加另一个视频时不必添加脚本？

我尝试使用document.getElementsByClassName("video")，但它不起作用。如何在 1 页中添加尽可能多的视频，而无需添加额外的脚本？

【问题讨论】：

您是否将类名 video 添加到您的 HTML 元素中？
我的代码现在正在运行，但如果我想添加一个新视频，我必须创建新的函数和 id 和脚本。有什么更高效的方法吗？
我添加它先生。但不工作
您可以将视频 id 作为变量传递给函数...
@andre3wap nggg，对不起，愚蠢的问题。先生，我该怎么做？老实说，我对 jquery 一无所知

标签： jquery twitter-bootstrap video embed

【解决方案1】：

我看到你已经有了解决方案，但这是我的想法:)

每个按钮都有视频的ID：

<button class="btn btn-primary play" id="video1" onclick="playPause()"><li class="fa fa-play"></li></button>

<button class="btn btn-primary play" id="video2" onclick="playPause()"><li class="fa fa-play"></li></button>

然后，您的脚本将如下所示：

 $("button").click(function(){
    var videoId = $(this).attr("id");
  playPause(videoId);

});


function playPause(videoId){
  var myVideo = document.getElementById(videoId); 

      if (myVideo.paused){
        myVideoa.play(); 
      }else {
        myVideo.pause(); 
      }
 }

【讨论】：

【解决方案2】：

您可以将单个事件处理程序应用于所有 button 元素并遍历 DOM 以找到它们相关的 video 元素。当您使用 jQuery 标记问题时，这里有一个 jQuery 实现：

$('.play').click(function() {
    var video = $(this).closest('.thumbnail').find('video')[0];
    if (video.paused)
        video.play();
    else
        video.pause();
});

<button class="btn btn-primary play">
    <li class="fa fa-play"></li>
</button>

【讨论】：