我有一個 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，我能夠獲取用于視頻的識別符號，并且我希望簡單地使用匹配識別符號作為播放按鈕播放視頻，并暫停任何其他不匹配的視頻。在這種情況下如何定位特定視頻？
uj5u.com熱心網友回復：
雖然可以決議元素的class字串i以找到video匹配的 GUID 并將其設定為播放，但這將是實作目標的一種非常脆弱的方式，并且會導致一些非常丑陋和不必要的代碼。
實作目標的更簡單方法是遍歷 DOM 以查找video與i. 當您用“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();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/389403.html
標籤：javascript html 查询 html5-视频