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?

Georgios Dimitriadis · Accepted Answer · 2015-06-02 17:34:26Z

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 2, 2015 at 17:34

Georgios Dimitriadis

6856 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

agon024 Over a year ago

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="<?php echo get_template_directory_uri(); ?>" 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?

Georgios Dimitriadis Over a year ago

I think this is what you're looking for: stackoverflow.com/questions/28333384/…

solid_luffy · Accepted Answer · 2015-06-02 17:38:56Z

0

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

answered Jun 2, 2015 at 17:38

solid_luffy

3712 silver badges15 bronze badges

Collectives™ on Stack Overflow

Loading HTML Video With jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related