Question

我正在编写一个HTML5应用程序，我正在尝试访问本机视频方法（播放，暂停等...）并使用jQuery。我不想使用任何其他插件。

var movie = $('#video_with_controls');

$('#buttonX').click(function() {
            movie.play();
      });

但是当我执行上面的代码时，我收到以下控制台错误消息：

Object has no method 'play'

我该如何解决这个问题？感谢。

Answer 1

HTML5视频DOM元素确实有.play()方法。 jQuery yet中没有play方法。你做错了的是从一个返回数组元素的jQuery选择器中激活游戏。

例如$('#clip')返回[<video width="390" id="clip" controls>…</video>]实际上是一个DOM元素的数组。要访问实际的DOM元素，您需要通过执行$('#clip')[0]之类的操作来解决其中一个数组元素。现在你可以将这个DOM元素告诉PLAY。

所以就这样做：

var movie = $('#video_with_controls');

$('#buttonX').click(function() {
            movie[0].play();  //Select a DOM ELEMENT!
      });

这是我的例子：

HTML：

 <video width="390" id="clip" controls="">
                    <source src="http://slides.html5rocks.com/src/chrome_japan.webm" type="video/webm; codecs=&quot;vp8, vorbis&quot;">                
                  </video>
        <input type="button" id="play" value="PLAY" />

的jQuery

$('#play').click(function(){
    $('#clip')[0].play()
});

有效：http://jsbin.com/erekal/3

如何使用jQuery访问HTML5视频方法？

1 个答案: