12

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

4

7 回答 7

9

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

尝试这样的事情：

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

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

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

于 2012-06-27T16:46:13.013 回答
6

我遇到了完全相同的问题（音频）。我不相信接受的答案可以解决或解释问题，主要是因为它不是 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);

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

于 2012-10-22T10:04:31.120 回答
6 
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;
    });
  }
});
于 2013-01-14T14:10:25.813 回答
3 
function playVid(){
  $('#vid').get(0).currentTime=5;
  $('#vid').get(0).play()
}

$(window).load(function(){
  playVid();
});

这是一个 jsfiddle 示例。

于 2012-06-27T16:48:22.490 回答
2

我在音频方面遇到了同样的问题。这是一场灾难:)。您必须先播放音频，然后才能设置 currentTime。我没有找到其他方法。这是一个很好的参考线程：https ://github.com/johndyer/mediaelement/issues/243

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

audioplayer.src = source;
audioplayer.play();
audioplayer.addEventListener('playing', function () {
    if (loadPlayed == false)
    {
        audioplayer.currentTime = Time;
        audioplayer.play();
        loadPlayed = true;
    }
    else {
        audioplayer.removeEventListener('playing', this);
    }
});
于 2015-03-30T03:35:47.473 回答
1

您也可以使用 atry - catch来避免此问题：

$(document).ready(function() {

    var $video = $('#vid'),
        video = $video[0];

    function playVid() {
        video.currentTime = 5;
        video.play();
    }

    try {
        playVid();
    } catch(error) {
        $video.on('loadedmetadata', playVid);
        video.load();
    }

});
于 2013-11-15T15:46:00.413 回答
1

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

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

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

于 2014-07-30T09:20:31.967 回答