有条件地为不同设备加载视频-JavaScript

Question

我想使用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