jQuery 使用新源注入视频元素

Question

每次我点击相应的链接时，我都会尝试使用 Chrome （我只有 webm 媒体资源）将 webm 格式的视频替换为另一个格式的视频。

我成功地将新源放入 src 属性中，然后使用 load() 和 play() 方法，但视频无法启动。当我手动将相同的网址放入 src 时，效果很好。

这是 HTML 的一部分：

<figure>
<video id="frag" autoplay controls>
<source src="" type="video/webm">
</video>
</figure>
<p>
<a href="#article3" class="game" rel="http://ninsuna.elis.ugent.be/Media/Showcase/Tennis/2009_FROpen_F_Federer-Soderling.webm?t=0.0,270.72">Game 1</a>
</p>
<p>
<a href="#article3" class="game" rel="http://ninsuna.elis.ugent.be/Media/Showcase/Tennis/2009_FROpen_F_Federer-Soderling.webm?t=317.04,379.88">Game 2</a>
</p>
...

和脚本：（

setTimeout(function() {
$(".game").click(function() {
var videoUrl = $(this).attr("rel");
$('#frag source').attr('src', videoUrl);
$('#frag').load();
$('#frag').play();
});
}, 1000);

由于某种原因我必须使用超时，文档加载不起作用，因为链接列表是动态生成的）

您可以在这里更仔细地检查它： 链接到我的网站

Answer 1

您正在对 jQuery 对象调用 play 方法，但该方法不起作用。您应该使用 get 或 [0] 来获取 HTMLVideo 元素，然后对其调用 play 方法。这同样适用于 load 方法。试试这个

$(function() {
  $(".game").click(function() {
     var videoUrl = $(this).attr("rel");
     $('#frag source').attr('src', videoUrl);
     $('#frag')[0].load();
     $('#frag')[0].play();
  });
});