使用jQuery选择HTML5视频对象

Question

我在使用jQuery获取HTML5视频标签时遇到问题.这是我的代码:

HTML代码:

<video id="vid" height="400" width="550">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
</video>

Javascript代码:

function playVid(){
    console.log($('#vid'));
    console.log($('#vid')[0]);
    $('#vid')[0].currentTime=5;
    $('#vid')[0].play()
}

$(document).ready(){
    playVid();
}

代码中断.currentTime了以下错误:

InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable

这里是我无法弄清楚位-第一个console.log显示我所期望的目标,这里面对象称为另一个对象0,这包含所有你所期望的,包括HTML5视频的属性和方法.currentTime.

但是,只要我做第二个日志,$('#vid')[0]就会显示视频标记的HTML代码,而不是我调用后的对象0.我得到了完全相同的结果console.log($('#vid')["0"])和console.log($('#vid').get(0)).

有没有办法获取在jQuery中0返回的对象中调用的对象$('#vid')？

Answer 1

我认为您在准备好之前尝试与视频元素进行交互.

尝试这样的事情:

function loadStart(event)
{
    video.currentTime = 1.0;
}

function init()
{
    video.addEventListener('loadedmetadata', loadStart, false);
}
document.addEventListener("DOMContentLoaded", init, false);

来源:HTML5视频 - Chrome - 错误设置currentTime

Answer 2

我有完全相同的问题(有音频).我不相信接受的答案会解决或解释问题,主要是因为它不是一个jquery解决方案.

奇怪的是我可以得到 currentTime属性,我甚至可以确保声音已经在尝试设置currentTime之前已经播放并且发生了同样的错误,所以我不相信这与媒体有关'准备'.

var a = $("#myaudio").get(0); // a html5 audio element
console.log(a)                // dumps the object reference in the console
console.log(a.currentTime);   // works fine, logs correct value
a.currentTime = 100           // fails with an InvalidStateError

解决方法是使用setTimeout

setTimeout(function(){
            a.currentTime = 0;
        },1);

......但我想明白为什么会失败!

Answer 3

var a_video = $('#video_id');

a_video.on('loadeddata', function() {
  if(a_video.readyState != 0) {
    a_video[0].currentTime = 100;
  } else {
    a_video.on('loadedmetadata', function() {
      a_video[0].currentTime = 100;
    });
  }
});