Блог

Я только что создал пример для гладкой карусели с видео 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=viewamp;id=0B_koKn2rKOkLSXZCakVGZWhOV00">
        <source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526amp;profile_id=112" type="video/mp4" />
      </video>
      <p class="caption">HTML 5 Video</p>
    </div>
  </div>
  

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

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

Теперь больше нет дочерних элементов с тегом «video», поскольку ваше видео теперь является внуком currentSlide div.

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

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

или

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

Обновлен codepen

ОТРЕДАКТИРУЙТЕ свой последний комментарий :

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

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

 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");
}