使用jQuery选择HTML5视频对象 [英] Selecting the HTML5 Video Object with jQuery

问题描述

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

Im having problems getting at the HTML5 video tag with jQuery. Here is my code:

HTML代码：

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

Javascript代码：

Javascript code:

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 。

Here is the bit that I cant figure out - the first console.log shows the object I would expect, inside this object is another object called 0 and this holds all the HTML5 video properties and methods you would expect, including .currentTime.

然而，只要我执行 $（'＃vid'）[0] 的第二个日志，它就会显示视频标签的HTML代码，而不是我之后称为 0 的对象。我得到了完全相同的结果 console.log（$（'＃vid'）[0]）和 console.log（$（ '#vid'）。get（0））。

However as soon as I do the second log of $('#vid')[0] it shows the HTML code for the video tag, and not the object I was after called 0. I get the exact same results for console.log($('#vid')["0"]) and console.log($('#vid').get(0)).

有没有办法获得名为的对象在 $（'＃vid'）返回的对象中的0 在jQuery中有效吗？

Is there a way of getting at the object called 0 in the object returned by $('#vid') that works in jQuery?

推荐答案

我认为你准备在视频元素准备好之前与之互动。

I think you are trying to interact with the video element before it is ready.

尝试这样的事情：

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

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

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

这篇关于使用jQuery选择HTML5视频对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！