本文介绍了如何使用带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并将其设置为播放，但这将是实现目标的一种极其脆弱的方式，并且会产生一些非常难看和不必要的代码。
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视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！