Как остановить загрузку указанного элемента c HTML? (Необходимо загрузить видео на основе устройств просмотра) - PullRequest
Новая
       35

Как остановить загрузку указанного элемента c HTML? (Необходимо загрузить видео на основе устройств просмотра)

0 голосов
/ 13 июля 2020

Мне нужно загрузить видео в зависимости от размера экрана или устройств (мобильных и настольных)

У меня такое же видео, подходящее для мобильных и настольных компьютеров (я использую шаблоны Jinja).

В текущем сценарии загружаются оба, что замедляет скорость загрузки страницы

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

html файл

`

  <div class="video-bg-desktop">
    <video id="background-video" autoplay loop muted playsinline poster="{{ img.url }}"
      class="header-new__video">
      <source src="{{ video_mp4 }}" type="video/mp4">
      <source src="{{ video_webm }}" type="video/webm">
      <img src="{{ img.url }}" class="no-video-image">
    </video>
  </div>
  <div class="video-bg-mobile">
    <video id="background-video" autoplay loop muted playsinline poster="{{ img.url }}"
      class="header-new__video">
      <source src="{{ video_mp4_mobile }}" type="video/mp4">
      <source src="{{ video_webm_mobile }}" type="video/webm">
      <img src="{{ img.url }}" class="no-video-image">
    </video>
  </div>`

Ответы [ 2 ]

0 голосов
/ 15 июля 2020

Что ж, здесь я нахожу решение, используя javascript в HTML файл

Я просто использую переменные Jinja, используемые в javascript, и устанавливаю атрибут sr c пустым по умолчанию

Он будет загружать видео условно, в соответствии с типом мобильного или настольного устройства.

ПРИМЕЧАНИЕ: убедитесь, что оно должно быть ниже кода HTML, так как классы и его элементы должны загружаться первыми, иначе он выдаст ошибка 

(function () {
const bgv = document.querySelector(".video-bg-desktop");
const bgvMobile = document.querySelector(".video-bg-mobile");

if (window.innerWidth > 850) {
  const children = bgv.children[0].children;

  for (let i = 0; i < children.length; ++i) {
    if (children[i].type === "video/mp4") {
      children[i].src = "{{ video_mp4 }}";
    }
    if (children[i].type === "video/webm") {
      children[i].src = "{{ video_webm }}";
    }
  }
} else {
  const children = bgvMobile.children[0].children;

  for (let i = 0; i < children.length; ++i) {
    if (children[i].type === "video/mp4") {
      children[i].src = "{{ video_mp4_mobile }}";
    }
    if (children[i].type === "video/webm") {
      children[i].src = "{{ video_webm_mobile }}";
    }
  }
}
})();
0 голосов
/ 13 июля 2020

Если вы просто используете простой старый HTML, как упоминалось выше, вы можете добавить правило CSS в зависимости от размера экрана.

Более точное решение c в javascript будет быть для создания файла. js, который отображает определенную страницу на основе браузера, используемого пользователем. В методе app.get () вы можете добавить обратный вызов, который можно скопировать с http://detectmobilebrowsers.com/, веб-сайта, который включает обратные вызовы для нескольких других языков.

...