HTML-видео для мобильного телефона?

Question

У меня проблема с моим сайтом. Когда я когда-либо запустить его в качестве настольной версии этого он открывает видео, как это предполагает, чтобы: https://edgaraxe.net/teamhusky/

Вот код для видео:

<div class="background-wrap"> 
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
     <source src="video/husky.mp4" type="video/mp4"> 
     Video not supported 
    </video> 
</div> 

Однако если открыть его для мобильной версии я получаю черный экран.

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

Answer 1

Добавить параметр poster к вашему video теге так:

<video .... poster="PATH_TO_IMAGE" autoplay="false"> 
    .... 
</video> 

Answer 2

<video /> тег имеет атрибут poster, который будет отображаться на устройствах, поддерживающих элемент video, но не поддерживающий автовоспроизведение.

<video poster="URL_TO_IMAGE" id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
    <source src="video/husky.mp4" type="video/mp4"> 
    Video not supported 
    </video> 

Answer 3

Вы можете использовать несколько видеоформатов для запуска видео в нескольких браузерах (включая мобильные). Итак, попробуйте добавить .Webm видео:

<div class="background-wrap"> 
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
     <source src="video/husky.mp4" type="video/mp4"> 
     <source src="video/husky.webm" type="video/webm"> 
     Video not supported 
    </video> 
</div>