Cargar фотография en móviles en vez de video

Tengo видео ООН сеть en la portada de mi de esta форма:

<section id="portada">
<video autoplay="autoplay" loop="loop" id="video_background" preload="auto" muted />
   <source src="videos/video_portada.mp4" type="video/mp4" />
   <source src="videos/video_web.webm" type="video/webm" />
</video/>
</section>

Quisiera que cuando la página cargase desde un móvil se cargase una foto en vez del video.

Estoy probando así:

    <section id="portada">
    <video autoplay="autoplay" loop="loop" id="video_background" preload="none" muted />
      <source id="video-mp4" src="" type="video/mp4" />
      <source id="video-webm" src="" type="video/webm" /> 
    </video>
<script type="text/javascript">  

  if (document.documentElement.clientWidth > 768) {

    document.querySelector("#video-mp4").src = "videos/video_portada.mp4";
    document.querySelector('#video-webm').src = "videos/video_web.webm";    
  }

</script>
    <img src="images/preboda/vertical_2.jpg" id="foto_portada" />
</section>

Mostrando подставляют мультимедийные запросы la imagen o el video:

#foto_portada{
  display: none;
}

#video_background{ display: block; }

@media (max-width:768px) {
#video_background{
   display: none;
}

#foto_portada{
   display: block;
}

}​

5
задан 09.11.2016, 13:32
4 ответа

У тебя могут быть два (видео и изображение) в твоем html и показывать их, как ты желал посредством среднего показателя queries:

<section id="portada">
<video id="video" autoplay="autoplay" loop="loop" id="video_background" preload="auto" muted />
   <source src="videos/video_portada.mp4" type="video/mp4" />
   <source src="videos/video_web.webm" type="video/webm" />
</video/>
<img id="foto" src="loquesea.png">
</section>

Например ты можешь делить, что видео было видимым и изображение не:

#foto{
   display: none;
}

#video{
   display: block;
}

И после для определенной ширины твоего браузера способствовать тому, чтобы видео скрылось и явилось изображением. Например, что между 250px и 500px показал себе фотографию и скрылось видео.

@media (max-width:500px) and (min-width:250px) {
    #video{
       display: none;
    }

    #foto{
       display: block;
    }
}​

Возможно, что это не форма больше "чистая" делания этого, но смоги подаваться для твоих спецификаций.

5
ответ дан 24.11.2019, 12:42
  • 1
    Большое спасибо! Плохое делания этого экспертом и # 237; дело в том, что он загружает видео tambi и # 233; n с тем, что замедляет ее p и # 225; gina. Пока я нахожу другой soluci и # 243; n эта стоит мне. – Javier Manzano 08.11.2016, 13:37
  • 2
    @JavierManzano S и # 237; поскольку я показал в ответе, в меня казаться - немного " sucia". Однако, он та и #250; nica форма, которую я знаю до сих пор. Быть и # 233; внимательный к твоему вопросу всех форм, если есть кто-то, кто помещает какой-то ответ, с которым это себе мог бы делать это формой много м и # 225; s простая и ясная:) – Francisco Romero 08.11.2016, 13:40
  • 3
    @JavierManzano Устройства м и # 243; подлые они не загружают видео первых, чтобы избегать впадать в ненужное использование данных, а следовательно действительно не быть должным и # 237; когда - ralentizaci и # 243; n (потому что не est и # 225; ничего не загружая). Но если это что-то, что ты хочешь предотвратить, ты можешь помещать ему стоимость " none" в preload – Alvaro Montoro♦ 08.11.2016, 20:03
  • 4
    @AlvaroMontoro Большое спасибо, уже я изменил признак из-за " none" я предполагаю, что для видео 10Mb он не необходим precargarlo для того, чтобы он не запутался, из-за которого пошел м и # 225; s r и # 225; я прошу, что сам груз. – Javier Manzano 09.11.2016, 00:09
  • 5
    @AlvaroMontoro - я издал мой ответ, потому что, когда он и # 237; do твой комментарий исследовал немного, потому что он напоминал мне что-то, что не было всегда экспертом и # 237; и по-видимому, когда имеется признак autoplay, игнорируется preload. – Black Sheep 09.11.2016, 03:19

Кто-то preguntГі что-то похожее в SOen и ответе, который они дали ему, было этим:

Ты Можешь aГ±adir это: poster="placeholder.png"

<video width="470" height="255" poster="placeholder.png" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

первоначальный Маршрут вопроса: ( https://stackoverflow.com / questions / 20075875/how-to-set-the-thumbnail-image-on-html5-video )

Надеялся, что он подает тебя.

1
ответ дан 24.11.2019, 12:42
  • 1
    Спасибо за ответ. Это служит для того, чтобы показать фотографию до того, как он загрузил видео. – Javier Manzano 08.11.2016, 13:18

Согласно документации Mozilla Foundation говорит:

У признака autoplay есть первенство на preload, если хочет размножиться автоматически видео, браузер очевидно будет должен загружать это.

А именно, когда ты используешь autoplay признак preload он игнорируется.

Тогда чтобы предотвращать груз видео в подвижных устройствах ты можешь делать это с javascript.

В примере нагрузи source видео только, если размер окна больше 500px, противоположность, видно изображение признака poster.

Видеть Demo

<video autoplay="autoplay" loop="loop" id="video_background" poster="http://placehold.it/560x320" muted>
    <source id="video-mp4" src="" type="video/mp4">
    <source id="video-webm" src="" type="video/webm">
</video>

<script>  

  if (document.documentElement.clientWidth > 500) {

    var videoSource = 'http://techslides.com/demos/sample-videos/small';

    document.querySelector('#video-mp4').src = videoSource + '.mp4';
    document.querySelector('#video-webm').src = videoSource + '.webm';    
  }

</script>
1
ответ дан 24.11.2019, 12:42
  • 1
    И которое изображение ты хочешь нагрузить? Помести в постер изображение, которое ты захочешь. Нет? И это mp4 и webm я упорядочиваю это тебе сейчас, когда est и # 233; дома...-@JavierManzano – Black Sheep 09.11.2016, 00:01
  • 2
    Не s и # 233; из-за qu и # 233; мотив не загружает мне видео ни в одном из случаев. – Javier Manzano 09.11.2016, 11:25
  • 3
    Какой браузер ты используешь? - @JavierManzano – Black Sheep 09.11.2016, 11:27

Как хорошо говорит приятель aldanux, не ли хочешь ты, чтобы он был загружен в виде пользователя, не загружай это.

Оптимальное состояло бы в том, чтобы оценивать устройство: https://github.com / hgoebl / mobile-detect.js /

и если ты хочешь быть точным больше, связь: https://stackoverflow.com / questions / 13988051/checking-someones-bandwidth-and-loading-content-based-on-it

С этого времени ты можешь загружать dinámicamente оптимизированные контенты и в твой выбор.

1
ответ дан 24.11.2019, 12:42