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

Posted 2023-05-07

【中文标题】如何使用带有 ID 的单独播放按钮播放多个 HTML5 视频

【英文标题】：How to play multiple HTML5 videos using individual play buttons with an ID

【发布时间】：2022-01-23 06:09:24

【问题描述】：

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

【参考方案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();
);