добрый день есть 5 блоков div , у каждого блока есть id , которому при клике на опренделенную кнопку задается css
display : block и блок появляется , в этих блоках есть видео и по стандарту они сразу все воспроизводятся
как реализовать чтобы при нажатии на определеную кнопку видео в блоке начиналось проигрываться
нужно без jquery на чистом javascript , прошу помочь
вот код
let openedPopupBlockName = null
function openPopupBlock(popupblockName) {
return new Promise((resolve, reject) => {
let qsel = `.popupblock.${popupblockName}`
console.log('opening', popupblockName, qsel)
let elem = document.querySelector(`.popupblock.${popupblockName}`)
elem.addEventListener('animationend', event => {
elem.classList.remove('animate__fadeIn')
resolve()
}, {once: true})
elem.classList.add('animate__fadeIn')
elem.style.visibility = 'visible'
})
}
function closePopupBlock(popupblockName) {
return new Promise((resolve, reject) => {
let qsel = `.popupblock.${popupblockName}`
console.log('closing', popupblockName, qsel)
let elem = document.querySelector(`.popupblock.${popupblockName}`)
elem.addEventListener('animationend', event => {
elem.classList.remove('animate__fadeOut')
elem.style.removeProperty('visibility')
resolve()
}, {once: true})
elem.classList.add('animate__fadeOut')
})
}
async function switchPopupBlock(popupBlockName) {
if (openedPopupBlockName === popupBlockName)
return
if (openedPopupBlockName)
await closePopupBlock(openedPopupBlockName)
await openPopupBlock(popupBlockName)
openedPopupBlockName = popupBlockName
}