Question

所以我想要的是根据设备的屏幕尺寸加载不同的视频。

这是我的jQuery：

var v = new Array();

v[0] = [
      "header.webm",
      "header.ogv",
      "header.mp4"
      ];
v[1] = [
      "mobHead.webm",
      "mobHead.ogv",
      "mobHead.mp4"
      ];

var src = $('#bgvid source');

if(window.innerWidth >= 642){
  src.attr("src", v[0]);
}
if(window.innerWidth <= 641){
  src.attr("src", v[1]);
}

这是我的HTML：

<video autoplay="" loop="" poster="" id="bgvid">
  <source src="" type="video/webm">
  <source src="" type="video/ogg">
  <source src="" type="video/mp4">
</video>

以下是浏览器输出：

<video autoplay="" loop="" poster="" id="bgvid">
  <source src="header.webm,header.ogv,header.mp4" type="video/webm">
  <source src="header.webm,header.ogv,header.mp4" type="video/ogg">
  <source src="header.webm,header.ogv,header.mp4" type="video/mp4">
</video>

您可以看到问题所在。我需要它将它们加载到正确的级联顺序中，而不是将它们全部加载到同一部分中。

我该怎么做？

Answer 1

由于您的项目中已经有jQuery，请使用它：

HTML：

<video autoplay="" loop="" poster="" id="bgvid">
  <source id="webmvid" src="" type="video/webm">
  <source id="oggvid" src="" type="video/ogg">
  <source id="mp4vid" src="" type="video/mp4">
</video>

JS：

var v = [];

v[0] = ["header.webm", "header.ogv", "header.mp4"];
v[1] = ["mobHead.webm", "mobHead.ogv", "mobHead.mp4"];

var index = window.innerWidth <= 641 ? 1 : 0;

$('#webmvid').attr('src', v[index][0]);
$('#oggvid').attr('src', v[index][1]);
$('#mp4vid').attr('src', v[index][2]);

基本上我只是简化你的if-case并用Id和jQuery定位每个视频src。

Answer 2

尝试此操作（为每个＆lt; source＆gt;添加ID并在js中引用它们）：

HTML：

<video autoplay="" loop="" poster="" id="bgvid">
  <source id="src1" src="" type="video/webm">
  <source id="src2" src="" type="video/ogg">
  <source id="src3" src="" type="video/mp4">
</video>

JS：

v1 = { 
webm: "header.webm", 
ogv: "header.ogv", 
mp4: "header.mp4"
} 

v2 = {
webm: "mobHead.webm", 
ogv: "mobHead.ogv", 
mp4: "mobHead.mp4"
};

if(window.innerWidth >= 642){
  $('#src1').attr("src", v1.webm);
  $('#src2').attr("src", v1.ogv);
  $('#src3').attr("src", v1.mp4);
}
else
{
  $('#src1').attr("src", v2.webm);
  $('#src2').attr("src", v2.ogv);
  $('#src3').attr("src", v2.mp4);
}

使用jQuery加载HTML视频

2 个答案: