Видео HTML5 не воспроизводятся автоматически с типичным js
Я использую tippy.js, и когда я добавляю <video loop muted playsinline autoplay> во всплывающую подсказку с помощью allowHTML: true, видео не будет автоматически воспроизводиться в Chrome. Хотя в фаерфоксе и в сафари работает.
Как я могу этого добиться?
Вот мой js:
const modal = card.querySelector('.modal'),
modalContent = modal.innerHTML`
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false
});
И вот мой html:
<div class = "modal">
<div>
<video loop muted playsinline autoplay>
<source src = "http://localhost:8888/artifacts/wp-content/uploads/2022/05/Artifacts-Landing.mp4" type = "video/mp4">
</video>
</div>
</div>
я пытался добавить
card.querySelector('video').play()
но это не работает.
Заранее большое спасибо за помощь,
@ Джошуа, я не получаю ошибок, только видео остается на паузе в первом кадре. Возможно, это связано со статусом видимости всплывающей подсказки? Так как всплывающая подсказка скрыта первой
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Действительно странно, что приглушенное видео не воспроизводилось автоматически. Вы можете использовать setTimeout, а затем вызвать play() с помощью события onShow(). У меня почему-то onShown() никогда не срабатывает.
Вот рабочий фрагмент:
const modal = document.querySelector('.modal'),
modalContent = modal.innerHTML;
tippy('.card', {
content: modalContent,
allowHTML: true,
interactive: true,
animation: 'shift-away',
followCursor: true,
arrow: false,
onShow(instance) {
setTimeout(() => {
let video = instance.popper.getElementsByTagName('video')[0];
video.currentTime = 0; //start from begining
video.play();
}, 1);
},
});.modal {
display: none;
}
video {
width: 40vw;
}
.card {
padding-top: 10vh;
}
h1{
display:inline;
margin:1em;
}<!-- Production -->
<h1 class = "card">CARD 1</h1>
<h1 class = "card">CARD 2</h1>
<script src = "https://unpkg.com/@popperjs/core@2"></script>
<script src = "https://unpkg.com/tippy.js@6"></script>
<div class = "modal">
<div>
<video loop muted playsinline autoplay>
<source src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/6/6c/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm/%22Movbild-fizika%22_falo_en_Big_Buck_Bunny.webm.720p.vp9.webm" type = "video/mp4">
</video>
</div>
</div>Большое спасибо @Miro! Он работает отлично, но ломается, когда в доме более одного видео. Я пытался заменить document.getElementsByTagName('video')[1].play(); на card.getElementsByTagName('video')[1].play();, но получаю сообщение о невозможности чтения свойств undefine. Если я попробую card.getElementsByTagName('video')[0].play();, я не получаю ошибок, но автозапуск не запускается. Странная причина, если я использую console.info card.getElementsByTagName('video')[0], я получаю элемент dom в консоли.
Попробуйте с instance.popper.getElementsByTagName('video')[0].play() Это должно быть нацелено на видео внутри текущего модального окна / всплывающей подсказки. Отредактировал пример выше
"Это не работает" не является описательным, это какая-то ошибка или что именно