使用 jQuery 选择 HTML5 视频对象

Posted 2023-05-07

【中文标题】使用 jQuery 选择 HTML5 视频对象

【英文标题】：Selecting the HTML5 Video Object with jQuery

【发布时间】：2012-06-29 04:08:41

【问题描述】：

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

HTML 代码：

<video id="vid"  >
<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 中获取 $('#vid') 返回的对象中名为 0 的对象？

【参考方案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

【讨论】：

啊——我试图在它们准备好之前访问它们！感谢您的帮助！

【参考方案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);

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

【讨论】：

我用类似于$(a).on('loadedmetadata',function()); 的方式将接受的答案改编为jQuery。

【参考方案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;
    );
  
);

【参考方案4】：

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


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

Here 是一个 jsfiddle 示例。

【讨论】：

抱歉，这只是重新创建了我的问题，并没有解决它。

我不明白你打算做什么。此代码完全符合您的要求，但不能解决您的问题？

它没有做 OP 想要的，事实上，如果它在 jsfiddle 之外运行，它会抛出与原始帖子中相同的异常。也许 jsfiddle 引入了足够的延迟，以便您提供的示例可以正常工作，但如果您在本地测试它肯定不会。

真的，你是对的。 Jsfiddle 将我的 javascript 代码放入 $(window).load(function());陈述。我将编辑答案。

【参考方案5】：

我在音频方面遇到了同样的问题。这是一场灾难:)。您必须先播放音频，然后才能设置 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);
    
); 

【参考方案6】：

您也可以使用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();
    

);

【参考方案7】：

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

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

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

【讨论】：

好的，它在 Firefox 中有效，但在 Chrome 中无效。也许 Chrome 需要更长的时间来加载视频，或者我的视频已经在 Firefox 的缓存中。在 Chrome 中，甚至 2 秒的超时都不起作用，所以这根本不是一个好的解决方案......