使用jQuery选择HTML5视频对象

我在使用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>

代码在

.currentTime

行中断，出现以下错误：

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

这里是我无法理解的一点-第一个

控制台。log

显示了我所期望的对象，在这个对象中是另一个名为

0

的对象，它包含了所有你所期望的HTML5视频属性和方法，包括

.currentTime

但是，只要我完成

$（'#vid'）[0]

的第二个日志，它就会显示视频标记的HTML代码，而不是我在调用

0

之后调用的对象。对于

console.log（$（'#vid'）[“0”]）

和

console.log（$（'#vid'）.get（0））

，我得到了完全相同的结果

---

在jQuery中工作的

$（'#vid'）

返回的对象中，是否有一种方法可以获取名为

0

的对象？

我想您正在尝试在视频元素准备好之前与它交互

试着这样做：

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

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

资料来源：

---

是一个JSFIDLE示例。

我也有同样的问题（关于音频）。我不相信公认的答案能够解决或解释问题，主要是因为它不是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);

---

…但我想了解它为什么会失败

您也可以使用

try-catch

来避免此问题：

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;
    });
  }
});

$（文档）.ready（函数（）{
变量$video=$（'#vid'），
视频=$video[0]；
函数playVid（）{
video.currentTime=5；
video.play（）；
}
试一试{
playVid（）；
}捕获（错误）{
$video.on（'loadedmetadata'，playVid）；
video.load（）；
}
});

我遇到了类似的问题，但无法使用事件侦听器，因为我使用时间代码并单击函数来设置当前时间。但我也找到了一个有效的解决办法。每当我点击一个按钮时（每个按钮都有不同的时间变量），这就是点击功能中的代码：

$("#movie").get(0).play();
setTimeout(function () {
     $("#movie").get(0).currentTime = my_time_variable;
}, 500);

---

因此，在启动函数之前等待0.5秒，InvalidStateError将不再发生。也许这是一个快速而肮脏的解决方案，但它是有效的；）

我的音频也有同样的问题。这是一场灾难：）。您必须先播放音频，然后才能设置currentTime。我没有别的办法。这里有一个很好的线程供参考：

播放元素，然后为将设置当前时间的“播放”事件设置事件侦听器。我必须防止无限循环，所以我在方法外设置了一个“loadplay”。它可能不优雅，但它是什么工作，所以我保留它

audioplayer.src = source;
audioplayer.play();
audioplayer.addEventListener('playing', function () {
    if (loadPlayed == false)
    {
        audioplayer.currentTime = Time;
        audioplayer.play();
        loadPlayed = true;
    }
    else {
        audioplayer.removeEventListener('playing', this);
    }
}); 

---

啊-我正试图在他们准备好之前访问他们！谢谢你的帮助！对不起，这只会重新制造我的问题，并不能解决它。我不明白你打算做什么。这段代码完全符合您的要求，但并不能解决您的问题？它不能满足OP的要求，事实上，如果它在JSFIDLE之外运行，它会抛出与原始文章中提到的相同的异常。也许JSFIDLE引入了足够的延迟，使您提供的示例能够工作，但是如果您在本地测试它，它肯定不会工作。真的，您是对的。JSFIDLE将我的javascript代码放在$（window.load（function（）{}）中；陈述我将编辑答案。我将接受的答案改编为jQuery，使用了类似于（'loadedmetadata'，function（）{}）的内容。好吧，它在firefox中有效，但在Chrome中无效。也许Chrome需要更长的时间来加载视频，或者我已经在firefox中缓存了视频。在Chrome中，甚至2秒的超时都不起作用，所以这根本不是一个好的解决方案。。。

$("#movie").get(0).play();
setTimeout(function () {
     $("#movie").get(0).currentTime = my_time_variable;
}, 500);

audioplayer.src = source;
audioplayer.play();
audioplayer.addEventListener('playing', function () {
    if (loadPlayed == false)
    {
        audioplayer.currentTime = Time;
        audioplayer.play();
        loadPlayed = true;
    }
    else {
        audioplayer.removeEventListener('playing', this);
    }
});