Loading HTML Video With jQuery

Question

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?

score 1 · Accepted Answer · answered Jun 02 '15 at 17:34

1

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.

answered Jun 02 '15 at 17:34

Georgios Dimitriadis

685
6
16

Kewl this does work as I need it to and it is shorter. Do you know how I can have something in the HTML src such as: src="" and have it append the videos to the end of the html. As it sits now it will remove anything in the src="" and put in the vid names. Can I append to the info already in there? – agon024 Jun 02 '15 at 18:02
I think this is what you're looking for: http://stackoverflow.com/questions/28333384/get-template-directory-uri-in-jquery-and-css – Georgios Dimitriadis Jun 02 '15 at 18:05

score 0 · Answer 2 · answered Jun 02 '15 at 17:38

Try This (add id to each < source > and reference them in 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);
}

Loading HTML Video With jQuery

2 Answers2

Linked