使用jQuery加载HTML视频不再起作用

Question

Here is the Development site: legiondesigns.com/pauls

And I also posted a previous question here Loading HTML Video With jQuery and that was working for a few days then it just stopped working. I am using WordPress 4.2.2 so I know that I have to use "wp_localize_script" which I have done. Because when you inspect the video element in chrome you can see that it is proper loading in the correct path. I can even right click the link in the inspection tool and click "open link in new window" and it opens the video and starts playing it. So I know that the link is correct and the "wp_localize_script" is working properly. But nothing is showing up except the poster image for the video.

When Looking at the debug console in firefox I see the message: "Invalid URI. Load of media resource failed (3) . So firefox is saying that it failed to load my videos. When I switch from console back to "inspector" in developer tools and find the video elements. It is showing the correct location and I can also copy that and paste it into a new window and the video comes up and plays. So I don't even see why firefox is giving me that error.

Here is my WordPress Localization PHP:

$site_parameters = array(
  'site_url' => get_site_url(),
  'theme_directory' => get_template_directory_uri()
);
wp_localize_script('custom-js', 'SiteParameters', $site_parameters );

Here is my jQuery:

var v = [];

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

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

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

And here is my HTML:

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

Im pretty much stuck so any help is greatly appreciated.

Answer 1

Well after racking my brain I figured it out. Well somewhat. It only works if I have something already in the src="" part of the html so by setting my HTML to:

<video autoplay="" loop="" poster="/library/images/vidPoster.jpg" id="bgvid">
  <source id="webmvid" src="temp" type="video/webm">
  <source id="oggvid" src="temp" type="video/ogg">
  <source id="mp4vid" src="temp" type="video/mp4">
</video>

Now it works. If I remove the temp from src="" then it does not work.