如何使用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();