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

Loading HTML Video With jQuery not working anymore

本文关键字：不再 工作 视频 HTML jQuery 加载 使用      更新时间：2023-09-26

这里是开发站点： legiondesigns.com/pauls

我还在这里发布了一个之前的问题 使用 jQuery 加载 HTML 视频，它工作了几天，然后它就停止工作了。我正在使用WordPress 4.2.2，所以我知道我必须使用我已经完成的"wp_localize_script"。因为当您在 chrome 中检查视频元素时，您可以看到它在正确的路径中正确加载。我甚至可以右键单击检查工具中的链接，然后单击"在新窗口中打开链接"，它会打开视频并开始播放。所以我知道链接是正确的，"wp_localize_script"工作正常。但是除了视频的海报图像外，什么都没有显示。

在 Firefox 中查看调试控制台时，我看到消息："无效的 URI。介质资源加载失败 （3）。所以火狐说它无法加载我的视频。当我从控制台切换回开发人员工具中的"检查器"并找到视频元素时。它显示了正确的位置，我也可以复制它并将其粘贴到新窗口中，然后视频出现并播放。所以我什至不明白为什么Firefox会给我这个错误。

这是我的WordPress本地化PHP：

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

这是我的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]);

这是我的 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>

我几乎卡住了，所以任何帮助都非常感谢。

在绞尽脑汁之后，我想通了。嗯，有点。只有当我在 html 的 src=" 部分中已经有一些东西时，它才有效，因此通过将我的 HTML 设置为：

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

现在它起作用了。如果我从 src=" 中删除临时温度，那么它不起作用。

相关文章：