Видео HTML5 (как webm, так и MP4) показывает пустой белый экран и не воспроизводится

#html #html5-video #mp4 #webm

#HTML #html5-видео #МР4 #webm

Вопрос:

Я потратил час на поиск в Google, но я либо не справляюсь с этим, либо это не обычная проблема.

Вот мой тег видео:

 <video class="video-background" preload="none" loop="loop" autoplay="autoplay">
    <source src="/resource/video/ripples.webm" type="video/mp4">
    <source src="/resource/video/ripples.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Независимо от того, в каком порядке я их размещаю, ни the webm , ни the mp4 не загружаются, они просто показывают пустой белый экран. Я также не получаю 404 с сервера, поэтому видео должно поступать с сервера?

Ценю любой вклад

РЕДАКТИРОВАТЬ: мы удалили preload="none" атрибут, и теперь отображается первый кадр видео, но по какой-то причине он не воспроизводит остальную часть видео (несмотря autoplay="autoplay" на наличие элемента.

1. Разметка кажется правильной. Если я протестирую его в Chrome с помощью webm jsfiddle.net/35cRY . Я думаю, что-то не так с вашим видео. Как вы его конвертировали? У меня хороший опыт работы с: online-convert.com

2. Спасибо! Я попробую этот сайт. Будет обновляться при успешном завершении / сбое 🙂

3. Не сработало — тот же результат.

4. можете ли вы указать URL-адрес?

Ответ №1:

Добавьте muted атрибут. (Chrome. Возможно, какая-то политика защиты от рекламы.)

(Также убедитесь, что вы не вложили <video> <video> его, что приведет к аналогичному результату. Но я ставлю на первую причину.)

1. Спасибо, у меня была такая же проблема, и добавление отключения звука сработало для меня. Самое странное, что видео будет воспроизводиться в предварительном просмотре в нашей CMS, но не на живом сайте.

Ответ №2:

Я столкнулся с очень похожей проблемой, решение которой заключалось в том, что я предоставлял строку с «px», когда ожидалось число для ширины и высоты. Мне потребовалась целая ВЕЧНОСТЬ, чтобы уловить ошибку и просто показать пустой экран.

 // BLANK WHITE SCREEN   HAIR PULLING
<video width="200px" height="300px" controls>
   <source...

 // WORKING VIDEO PLAYER
<video width="200" height="300" controls>
   <source...

Надеюсь, это поможет другим.