html怎么判断PC端和移动端从而显示不同的图片？

利用 JS 判断页面是在手机端还是在 PC 端打开，我们可以通过JS的Navigator对象，该对象包含有关浏览器的信息，带有许多属性和方法，其中userAgent 属性用于返回由客户机发送服务器的 user-agent 头部的值，通过这个值我们可以根据是否含有某些关键字去进行判断当前页面是在手机端还是在pc端。
例如：在windows电脑中

console.log(navigator.userAgent)

打印信息如下：

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36

 由上面的打印信息可知，有出现windows关键字，所以我们可以通过使用正则表达式去匹配关键字进行判断。

检测当前是pc端还是移动端

  function device () {

    var deviceName = navigator.userAgent.toLowerCase();

    // if判断，是不是移动端；如果是，则定义为移动端图片；如果不是，则定义为PC端的图片；

    if (/Android|iPhone|webOS|iPod|BlackBerry/.test(deviceName)) {

      $adres = "./images/banner/m-banne1.jpg";

      console.log("移动端");

    } else {

      $adres = "http://bbsfile.51xunyuan.com.cn/video-bg1.mp4";

      console.log("pc端");

    }

  }

  device()

 function changeUrl () {

    var video = document.getElementById("background-video");

        // 把变量[adres] 赋值给 [video](这个名字也可以随便取);

         imags.src = $adres

  }

<!-- ID = [imags],这个要对应上上面赋值的ID；如果有多张图的，更改不同ID即可;

<img id="imags" src="" οnerrοr="changeUrl ()" style="width: 100%; height: auto; vertical-align: top;" data-ratio="0.6666666666666666" data-type="jpg" rel="no-referrer" referrerpolicy="no-referrer"/>

那么,如果想要pc端显示视频,移动端显示图片 怎么做呢?