小编Mig*_*rso的帖子

我正在测试使用引导程序在我的机器上本地构建站点。

我有一种<video>作为网站的标题。

我希望此视频在移动设备上显示完整的宽度和高度，并在桌面上显示视频的裁剪/宽版本。我尝试在<source>标签中使用内联媒体查询，这样src会改变但没有任何作用。

所以我换了档并使用了一些 javascript 来改变它。

所以疯狂的是，我的脚本似乎有效。当我查看 chrome 开发工具时，src当我调整浏览器屏幕大小时，它实际上会发生变化，但是，它不会反映在网站本身上，它会保留src我在 html 中设置的任何内容，就好像它忽略了我的脚本一样。

我已经尝试了我能想到的所有方法，但我只是被困住了，不知道如何继续下去。我的代码如下：

HTML

<video class="col-12" loop muted autoplay >
  <source id="hvid" src="media/test.mp4" type="video/mp4">
</video>

JS

let homeVideo = document.getElementById('hvid')
console.log(homeVideo.src)


function myFunction(x) {
  if (x.matches) { // If media query matches
    homeVideo.src = "media/test.mp4";
  } else {
   homeVideo.src = "media/test-3.mp4";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function …

尝试创建一些 Javascript 类和父类，不确定我是否正确执行此操作，但子类中的 super() 无法正常工作。尝试使 DivElement 中的内容正常工作，但它始终返回未定义。

代码：

 class HTMLElement{
    constructor(tag, content){
        this.tag = tag;
        this.content = content;
    }

    render(){
        return `<${this.tag}>${this.content}</${this.tag}>`;
    }

class DivElement extends HTMLElement{
constructor(content){
    super(content);
    this.tag = 'div';
   }

 }

let div1 = new DivElement('test');
console.log(div1);
console.log(div1.render());