获取youtube视频的当前播放时间 [英] Getting the current time of the youtube video playing

问题描述

因此，我正在开发chrome扩展程序.我正在尝试获取Youtube视频的当前播放时间

So I am developing a chrome extension. I am trying to get the Youtube video current playing time

我知道在其他帖子中也有很多类似的问题，但是它们的代码都不适合我

I am aware that there are many similar questions asked in other posts, but none of their code works for me

我的代码是这样的，我必须先将我的代码注入到内容脚本中

My code is like this, I have to inject my code to the content script first

chrome.tab.query({highlighted: true}, tabs => {
   tab = tabs[0]
   chrome.tabs.executeScript(tab.id, {code: "temp = 
                             document.getElementById('movie_player'); 
alert(temp); alert(temp.getCurrentTime());"}, respond => {});
}

因此，当我运行此命令时，我会收到一条警告，提示[object HTMLDivElement].但不会从temp.getCurrentTime()中得到任何信息.

So when I run this, I will get an alert saying [object HTMLDivElement]. but won't get anything from temp.getCurrentTime().

推荐答案

问题:

• 元素是一个复杂的对象，因此alert()无法以有意义的方式显示它，这就是为什么看到[object HTMLDivElement]的原因.无论如何，您不需要它，我想这是一个测试.

  Problems:

  • An element is a complex object so it can't be displayed by alert() in a meaningful way, which is why you see [object HTMLDivElement]. You don't need it, anyway, it was a test, I guess.

    实际的问题是#movie_player是<div>，其中许多YouTube Player API函数在页面上下文中显示为 ，但在孤立的世界中却不存在，在该世界中所有内容脚本跑.要访问页面上下文，您必须自己使用页面脚本，这不必要地复杂.

    The actual problem is that #movie_player is a <div> with a lot of YouTube Player API functions exposed in the page context, but not in the isolated world where all content scripts run. To access the page context you would have to use a page script yourself, which is unnecessarily complicated.

    访问<video>元素，该元素公开 currentTime 作为标准DOM属性，因此它既可以在页面上下文中使用，也可以在内容脚本的隔离世界中使用.然后通过将结果作为code字符串中的最后一个表达式来将结果传输到回调中:

    Access the <video> element which exposes currentTime as a standard DOM property so it's available both in the page context and in the isolated world of content scripts. Then transfer the result into the callback by making it the last expression in the code string:

    chrome.tabs.executeScript({
      code: 'document.querySelector("video").currentTime'
    }, results => {
      const time = results && results[0];
      console.log(time);
    });
    

    • 结果应为简单类型，例如字符串/数字/布尔值/空值或由此类简单类型组成的数组/对象，这意味着您无法传输DOM元素和函数；
    • 该结果应在回调内部使用，因为它是异步调用的，这意味着它在外部代码完成后在以后的某个时间运行，更多信息:
      • the result should be a simple type like a string/number/boolean/null or an array/object consisting of such simple types, meaning you can't transfer DOM elements and functions;
      • the result should be used inside the callback because it's invoked asynchronously, meaning it runs at a later time in the future, after the outer code has already finished, more info: Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference;
      • if you always want to process the active tab you don't need to specify the tabId in executeScript() so you don't need chrome.tabs.query() either.

      chrome.tabs.executeScript({
        code: `(${() => {
          const el = document.querySelector('video');
          return {
            time: el.currentTime,
            duration: el.duration,
          };
        }})()`
      }, results => {
        const info = results && results[0];
        console.log(info);
      });
      

      这篇关于获取youtube视频的当前播放时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！