Дополнительный контейнер div ломает функцию воспроизведения видео html5 - PullRequest
Новая
       28

Дополнительный контейнер div ломает функцию воспроизведения видео html5

1 голос
/ 27 марта 2019

Я только что создал пример для гладкой карусели с видео html5: https://codepen.io/anon/pen/PLvreP

На первом слайде видео запускается автоматически.На втором слайде есть дополнительный контейнер div, обертывающий видео-тег, и там автозапуск больше не работает.

Что я должен сделать, чтобы он работал, даже если внутри есть дополнительный контейнер?

Спасибо за вашу поддержку!L

Это пример второй разметки html, которая не работает: 

<div class="item video">
    <div>
      <video class="slide-video slide-media" loop muted preload="metadata" poster="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSXZCakVGZWhOV00">
        <source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
      </video>
      <p class="caption">HTML 5 Video</p>
    </div>
  </div>

1 Ответ

0 голосов
/ 27 марта 2019

Добавляя дополнительный div, вы нарушаете код, который выбирает видео для воспроизведения.В вашей функции playPauseVideo: 

video = currentSlide.children("video").get(0);

Теперь больше нет детей с тегом "video", так как ваше видео теперь является внуком элемента currentSlide.

Адаптируйте способ, которым вы выбираете этот видеоэлемент и который должен его исправить 

video = currentSlide.children("div").children("video").get(0);

или 

video = currentSlide.find("video").get(0);

Обновлен код ручки

РЕДАКТИРОВАТЬ относительно вашего последнего комментария:

К сожалению, это не влияет на мой веб-сайт, и никаких ошибок не отображается.Как я могу узнать, где может быть ошибка?Есть ли способ отправки логов на консоль?Я уже искал много часов

Дело в том, что вы выбираете свое видео и перед вызовом воспроизведения / паузы вы проверяете, имеет ли оно ноль: 

video = currentSlide.children("video").get(0);
if (video != null) {
  if (control === "play"){
    video.play();
  } else {
    video.pause();
  }
}

ТакЕсли вы хотите записать ошибку, вы можете добавить блок else и использовать console.error()

if (video != null) {
  if (control === "play"){
    video.play();
  } else {
    video.pause();
  }
} else {
   console.error("The video was not found");
}
...