如何使用带ID的单个播放按钮播放多个HTML5视频

问题描述

我有一个HTML5视频列表，其中也有一个播放按钮。

每个播放按钮都有一个唯一的标识符(作为类名)，然后每个视频都有一个匹配的类名，这样我就可以将特定的按钮分配给特定的视频进行播放。

HTML

<figure class="hover-scale rounded mb-0 ratio ratio-1x1">
    <a class="thumbnail-wrapper" href=".........">
        <video class="3c4c0f2d-6324-48c3-b32b-08d9c0b035e0 loaded" data-src="......." data-was-processed="true" loop="" preload="metadata" src="........" width="100%">
            <source src=".........." type="video/mp4">
        </video>
    </a>
    <p>
        <i class="uil uil-play text-white fs-20 video-play-button 3c4c0f2d-6324-48c3-b32b-08d9c0b035e0"></i>
    </p>
</figure>

Javascript

var videoPlayBackBtn = document.getElementsByClassName('video-play-button');
for (let item of videoPlayBackBtn) {
    console.log(item.id);
    item.addEventListener('click', function(){
        console.log(this);
    })
}

通过上面的JS，我可以获得视频使用的标识符，我希望简单地使用匹配的标识符作为播放按钮来播放视频，并暂停任何其他不匹配的视频。在此方案中如何确定特定视频的目标？

推荐答案

虽然可以分析i元素的class字符串以找到与该GUID匹配的video并将其设置为播放，但这将是实现目标的一种极其脆弱的方式，并且会产生一些非常难看和不必要的代码。

const $videos = $('figure video');

$('.video-play-button').on('click', e => {
  let $video = $(e.target).closest('figure').find('video');
  $videos.not($video).each((i, v) => v.pause());
  $video[0].play();
});