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

Question

我有一个包含 HTML5 个视频的列表，这些视频也有一个播放按钮。

每个播放按钮都有一个唯一标识符（作为 class 名称），然后每个视频都有一个匹配的 class 名称，这样我就可以为特定视频分配特定按钮回放。

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，我可以获得用于视频的标识符，我希望简单地播放带有匹配标识符的视频作为播放按钮，并暂停任何其他不匹配的视频。在这种情况下如何定位特定视频？

Answer 1

虽然可以剖析 i 元素的 class 字符串以找到匹配该 GUID 的 video 并设置它播放，但这将是一种非常脆弱的方式来实现你的目标，并会导致一些非常丑陋和不必要的代码。

实现目标的更简单方法是遍历 DOM 找到与 i 相关的 video。当您用 'jQuery' 标记问题时，这里是 HTML:

中此结构的所有实例的单个处理程序的实现

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();
});

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

How to play multiple HTML5 videos using individual play buttons with an ID

html

javascript

jquery

html5-video