使用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))完全相同的结果。

有没有办法在$('#vid')返回的对象中调用0这个对象在jQuery中工作？

Answer 1

我想你正试图在视频元素准备就绪之前与其进行交互。

尝试这样：

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

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

来源：HTML5 Video - Chrome - Error settings currentTime

Answer 2

function playVid(){ 
    $('#vid').get(0).currentTime=5; 
    $('#vid').get(0).play() 
} 

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

Here是的jsfiddle为例。

Answer 3

我有完全相同的问题（与音频）。我不相信所接受的答案可以解决或解决问题，主要是因为它不是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 4

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

Answer 5

你也可以使用一个try - 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(); 
    } 

}); 

Answer 6

我有一个类似的问题，但因为我有时间码的工作不能使用该事件侦听器，然后单击功能设置当前时间。但我也找到了一个工作解决方案。每当我点击一个按钮（每一个按键都有不同的时间变量），这是点击功能中的代码：

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

因此，与发射的InvalidStateError不会再发生作用之前等待0.5秒。也许这是一个快速和肮脏的解决方案，但它的作品;）

Answer 7

我有音频相同的问题。这是一场灾难:)。您必须先播放音频，然后才能设置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); 
    } 
});