使用jQuery加载HTML视频 [英] Loading HTML Video With jQuery

问题描述

这是我的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.mp4type =video / webm> 
< source src =header.webm，header.ogv，header.mp4type =video / ogg> 
< source src =header.webm，header.ogv，header.mp4type =video / mp4> 
< / video> 
  

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

我该怎么做？

HTML：

 < video autoplay =loop =poster =id =bgvid> 
< source id =webmvidsrc =type =video / webm> 
< source id =oggvidsrc =type =video / ogg> 
< source id =mp4vidsrc =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来定位每个视频片段。 / p>

So what I am trying to to is load different video based on the screen size of the device.

Here is my 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]);
}

Here is my HTML:

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

Here is the browser output:

<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>

You can see where the problem lies. I need it to load them into the proper cascading order and not load them all into the same section.

How can I do this?

解决方案

Since you already have jQuery in your project, use it:

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]);

Basically I just made your if-case shorter and targeted each video src with an Id and jQuery.

这篇关于使用jQuery加载HTML视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！