Условно загружаем видео для разных устройств - JavaScript - PullRequest
Новая
       27

Условно загружаем видео для разных устройств - JavaScript

0 голосов
/ 15 февраля 2019

Я хотел бы загружать различные видео в зависимости от устройства пользователя, используя JavaScript.Но я не могу этого сделать, видео не будет отображаться: - /

Мой HTML: 

<div id="fullsize-video-bg">
  <video id="video-bg-test-mobile" preload="metadata"></video>
  <video id="video-bg-test-desktop" preload="metadata"></video>
</div>

Мой JavaScript: 

function loadVid(){

  if (window.matchMedia("(min-aspect-ratio: 1/1)").matches) {

    var videourl = 'https://example.com/video-bg-test-desktop.mp4';
    var videocontainer = '#fullsize-video-bg';
      var parameter = new Date().getMilliseconds();

      var video = '<video width="1920" height="1080" id="video-bg-test-desktop" autoplay loop muted playsinline src="' + videourl + '?t=' + parameter + '"></video>';

      $(videocontainer).append(video);

      video = $(document).find('#video-bg-test-desktop')[0];

      video.load();
    }

  else {

    var videourl = 'https://example.com/video-bg-test-mobile.mp4'; 
    var videocontainer = '#fullsize-video-bg';
      var parameter = new Date().getMilliseconds();

      var video = '<video width="768 " height="1366" id="video-bg-test-mobile" autoplay loop muted playsinline src="' + videourl + '?t=' + parameter + '"></video>';

      $(videocontainer).append(video);

      video = $(document).find('#video-bg-test-mobile')[0];

      video.load();
  }
}

Я также сделал ручку: https://codepen.io/mcmc/pen/YBJeqd

...