Javascript Onclick播放多个视频的Jquery触发器

我正在尝试使用Jquery为每个视频创建一个触发器，以便在单击时播放，但是它只起作用。我发现的方法需要在HTML中应用标记数据组。我是通过VisualComposer（wordpress）创建这个触发器的，我只能对每个视频应用一个自定义类和ID，所以我不能使用当前的方法

Codepen

HTML

<div class="video_container">
<video class="video-ctrl" loop="" playsinline="" autoplay>
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/seating_handbrake.mp4" type="video/mp4">
  </video>
</div>

<div>
    <span class="truss_wizard" data-group="play">clickme1</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/truss_wizard_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/truss_handbrake.mp4" type="video/mp4">
    </video>
</div>

<div>
    <span class="projection_wizard" data-group="play">clickme2</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/projection_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/projection_handbrake.mp4">
    </video>
</div>

<div>
    <span class="pipe_drape_wizard" data-group="play">clickme3</span>
    <video poster="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/Pipe-and-Drape_poster.jpg">
    <source src="http://sandbox.cast-soft.com/wp-content/uploads/2017/04/pipe_drape_handbrake.mp4" type="video/mp4">
    </video>
</div>

注意：我之所以使用包装器，是因为我在wordpress中插入了一个用VisualComposer构建的页面

jQuery（函数（$）{
//更改元素，使其具有一个类，您可以找到多个
$（“.play2”）。单击（函数（）{
//找到所有play2元素
$（“.play2”）
//得到他们所有的父div
.最近的（'div'）
//找到他们的嵌套视频
.find（'视频'）
//每一个都玩
.each（函数（）{this.play（）；}）；
});
});
//使用数据属性使其更具动态性
//单击我2
jQuery（函数（$）{
//更改元素，使其具有一个类，您可以找到多个
变量$players=$（'.square'）；
$players.单击（函数（）{
//找到所有play2元素
$players.filter（'[data group=“”+$（this.data（'group'）+'“]））
//得到他们所有的父div
.最近的（'div'）
//找到他们的嵌套视频
.find（'视频'）
//每一个都玩
.each（函数（）{this.play（）；}）；
});
});您重复了“播放2”id。id必须唯一。id的选择器只能找到一个元素。改为有一个类，它会找到多个。我做了这些更改，但似乎所有的视频都在同一时间播放，我想每次触发一个，但它是相应的按钮。注意：按钮与视频不在同一个div中，我试图从作为选项卡一部分的范围码触发视频。我用你的代码制作的新密码笔：@DanielVianna你所有的数据组在密码笔人中都是相同的，值为“play”。我可以让它工作，但我仍然有一个问题。我意识到我不能添加数据组。我正在通过VisualComposer进行黑客攻击。我只能将ID和类附加到每个选项卡，但不能添加数据组。有解决办法吗？注意：第一个视频应该不会被触发，而是自动播放，所以我把它退出了功能。这是我可以访问的内容的屏幕截图：
//making it more dynamic with a data attribute
//  <span class="square" data-group="play2">clickme2</span>

jQuery(function($) {
  //change the elements so they have a class and you can find multiple
    var $players1 = $('.truss_wizard');
    var $players2 = $('.projection_wizard');
    var $players3 = $('.pipe_drape_wizard');

    $players1.click(function() {
    //find all the playbutton elements
    $players1.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();
                    });
    $players2.click(function() {
    //find all the playbutton elements
    $players2.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();   
                         });
    $players3.click(function() {
    //find all the playbutton elements
    $players3.filter('[data-group="'+ $(this).data('group') +'"]')
    //get all their parent divs
    .closest('div')
    //find their nested videos
    .find('video')
    //play each of them
    .each(function(){ this.play();   
                         });
      }); 
     }); 
   }); 
});//function closes

.truss_wizard,.projection_wizard,.pipe_drape_wizard{
      height: 50px;
      width: 200px;
      display: block;
      background-color: #7ac810;
  font-size: 15;
}

span {
  font-color: yellow;
  font-size: 30px;
}

.video {
 margin-bottom: 100px;
}