Воспроизвести видео html 5 при помощи jquery
Есть код:
<div class="owl-item active">
<div class="scrollflow -slide-top s22">
<div class="video_block video_block3 ani2">
<video id="video_slays140" width="100%" preload="metadata" class="scrollflow -slide-top -opacity" loop playsinline>
<source src="https://kulibinstudio.com/image/catalog/video/Mob/video0002.mp4" type="video/mp4;codecs="avc1.42E01E, mp4a.40.2"">
</video>
</div>
</div>
</div>
let block_show140 = null;
let video140 = $("#video_slays140");
$(window).scroll(function(){
scro_play140();
});
function scro_play140() {
let wt = $(window).scrollTop();
let wh = $(window).height();
let et140 = $('#video_slays140').offset().top;
let eh140 = $('#video_slays140').outerHeight();
if (wt + wh >= et140 && wt + wh - eh140 * 2 <= et140 + (wh - eh140)){
if (block_show140 == null || block_show140 == false) {
video140.pause();
}
block_show140 = true;
} else {
if (block_show140 == null || block_show140 == true) {
video140.play();
}
block_show140 = false;
}
}
его суть: при прокрутке к элементу происходит событие. все отлично работает. проблема: но видео не запускается. консоль гугла пишет: Uncaught TypeError: video140.play is not a function скрин: http://joxi.ru/52apWXWUgBnqQm |
StartGames,
video140 у вас это объект jquery, у этого объекта нет никаких play. вам нужен сам элемент, в объекте он хранится под индексом ноль. video140[0].pause(); video140[0].play(); |
спасибо, вы совершенно правы)
|
спасибо еще раз, но не подскажите как включить или отключить звук?
пробовал так: video140[0].unmuted(); и так: video140[0].muted(); не помогает. |
StartGames,
video140[0].muted = false; video140[0].muted = true; |
ого как все просто то))
Но к сожалению после такого получил ошибки: http://joxi.ru/bmoKyRyH7k5PYm (index):4091 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD |
StartGames,
при отсутствии на странице живого юзера играть ничего не будет!!! |
Цитата:
|
StartGames,
автоматом звук и видио запрещены, пока по странице не кликнут или ещё как-то произведут событие на странице руками, а не скриптом. |
StartGames,
SuperZen, про play |
Цитата:
|
Цитата:
В любом случае огромное Вам спасибо)) Не первый раз выручаете.:yes: |
Решил отключать видео при клике на баннер.
Действия: При клике на сам блок отключать все видео в этом блоке, и затем моментально запускать только то, у которого в пути есть класс .active Но столкнулся с проблемой: Я пытался отключить все видео вот таким запросом:
$('#banner_slays_{{ module_id }}').click(function() {
$('#banner_slays_{{ module_id }} .owl-item video').pause();
});
Но опять же, он не сработает по причине которую вы описывали ранее. Сработает только такая конструкция:
$('#banner_slays_{{ module_id }}').click(function() {
$('#banner_slays_{{ module_id }} .owl-item video')[0].pause();
});
Проблема: Я бы мог создать действие для каждого видео в этом блоке. На данный момент их 4. Но я не знаю буду ли в будущем добавлять слайды, и тогда придется опять идти в код и добавлять событие. А это неудобно очень. Вопрос: Можно как то одним действием отключить все видео в этом блоке? Зачем: Я не знаю какой слайд был перед включен перед тем как пользователь переключил слайд. И соответственно это видео будет продолжать играть. А так, после клика я просто отключаю их всех и сразу включаю только то что содержит в пути класс .active Таким образом я и неактивные отрубаю, и активный слайд включаю. |
Цитата:
$('#banner_slays_{{ module_id }}').click(function() {
$('#banner_slays_{{ module_id }} .owl-item video').each((i, video) => video.pause());
})
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:12. |