如何使用jQuery引用HTML5視頻元素？

Question

鑒於此標記

<p><a href="#">LOAD VIDEO</a></p>

<video id="video" controls width="560">
    <source id="webm" type="video/webm" />
    <span>zoom-club.webm</span>
</video>

而這個腳本

$(document).ready(function(){

    $('a').on('click',function(){

        var path = "../assets/" + $('span').text();

        $('source').attr('src', path);

        $('video#video').load();
        $('video#video').play();

    });

});

為什么會出現此錯誤？

Uncaught TypeError: undefined is not a function

這實際上可以使用傳統的Javascript和getElementById起作用，但是由於某些原因，我引用視頻標簽的方式已損壞。 是什么賦予了？

Answer 1

您收到此錯誤的原因是

$('video#video')

給你一個jQuery對象。 但是它沒有play()方法。

因此，您需要從中提取DOM對象：

$('video#video')[0]

現在，您可以調用play() ：

$('video#video')[0].play();