jQuery注入新源視頻元素

Question

我試圖用每次點擊相應的鏈接，使用Chrome（我只有webm媒體資源）替換webm格式的視頻與另一個。

我成功地將新源放在src屬性中，接着是load（）和play（）方法，但視頻無法啓動。當我手動在src中放置相同的URL時，效果很好。

這是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); 

（由於某種原因，我不得不使用超時，文件加載不工作，爲鏈接是動態生成的列表）

您可以點擊此處查看更多thoughrouly：link to my web

Answer 1

您在jQuery對象上調用play方法，該方法無效。您應該使用get或[0]獲取HTMLVideo元素，然後在其上調用播放方法。同樣適用於load方法。試試這個

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