getCurrentTime() for YouTube Video

Question

I'm writing a Chrome Extension in Javascript and I want to get the current time for the playing video on youtube.com. I tried using the answer from question Getting Current YouTube Video Time , e.g.:

ytplayer = document.getElementById("movie_player");

ytplayer.getCurrentTime();

However I do get following error: "Uncaught TypeError: Cannot read property 'getCurrentTime' of null";

What I am doing wrong? I tried different values for the ElementId - movie_player, player....

Any help is appreciated. Thanks in advance.

Cheers.

edit:

Here is my manifest:

{
  "manifest_version": 2,

  "name": "",
  "description": "",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "basic.html"
  },
  "permissions": [
    "tabs",
    "activeTab", "http://*/*", "https://*/*"
  ]
}

Another thing is: If I execute this code:

ytplayer = document.getElementById("movie_player");

ytplayer.getCurrentTime();

In the Javascript console on a Youtube Page it works fine and returns the current time. If, however I execute this value from the extension or the console of the extension, the first line return value null.

So, as Ben assumed below, the issue seems to be that my extension doesn't even access the Youtube page.

Any help is appreciated, so thanks in advance.

Cheers

Can you show your manifest and say where that line of code goes? — Xan, Apr 04 '14 at 18:33
I found this helpful post. http://stackoverflow.com/questions/37494344/dom-function-works-in-console-but-not-in-extension-despite-waiting-for-it-to-lo — pcpetepete, Aug 02 '16 at 21:47
This answer solved the issue for me : https://stackoverflow.com/a/40903459/4896841 — Taknok, Nov 30 '17 at 14:20

score 14 · Answer 1 · answered May 26 '18 at 19:02

14

Use the following code works for chrome extension:

video = document.getElementsByClassName('video-stream')[0];
console.log(video);
console.log(video.currentTime);

answered May 26 '18 at 19:02

Qazi Hassam Tariq

141
1
4

Thanks! This is the only thing that has worked for me! Using it in a chrome extension as well. Very strange it won't work otherwise – TrySpace May 24 '20 at 08:58

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

4

In 2020, it seems we should use: player.playerInfo.currentTime.

full code on codepen

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 26 '20 at 14:25

yaya

7,675
1
39
38

Xan · Accepted Answer · 2020-05-24T08:59:51.577

1

As Ben correctly assumed, you're executing the code in the context of your background page, which is wrong.

To interact with other pages, you need to inject a content script in them. See overview of that here. You'll probably need to learn how Messaging works so you can gather data in a content script and communicate it to the background page.

To make a minimal example, you can have a file inject.js

// WARNING: This example is out of date
// For the current HTML5 player, see other answers' code snippets
ytplayer = document.getElementById("movie_player");
ytplayer.getCurrentTime();

And in your background page script, you can inject that into the current page as follows (when the button is clicked, for instance)

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript({
    file: 'inject.js'
  });
});

Then, you'll see the result of the execution in the console of the currently open page. To report the result back, you'll need to use chrome.runtime.sendMessage

edited May 24 '20 at 08:59

answered Apr 04 '14 at 19:25

Xan

74,770
16
179
206

1

Hi. Met with the same issue, your solution hasn't helped either. – Preethi Kumar Aug 02 '16 at 13:39
3

I tried injecting a script into my background.js, still tells me `ytplayer.getCurrentTime is not a function` – Preethi Kumar Aug 02 '16 at 13:53
I'm getting inject.js:1 Uncaught TypeError: n.getCurrentTime is not a function at Object. (inject.js:1) at n (inject.js:1) at inject.js:1 at inject.js:1 – Rod Lima Dec 27 '18 at 17:15
I presume this is due to YT player API changes. The "meat" of the answer (that you need a page-level inject) still stands, even if the script likely needs to be different. – Xan Dec 27 '18 at 17:23
1

For me `document.getElementsByClassName('video-stream')[0];` worked to get the currentTime, I was using it in a chrome extension – TrySpace May 24 '20 at 08:57

Ben · Answer 4 · 2014-04-04T18:29:23.183

0

you can only use getElementById when you´r referencing to the correct page. You´r using the right id. if you´r trying to access the play form another page you can use the jquery .load() function

---------EDIT----------

in the sample they do it like so: function getCurrentTime() { var currentTime = player.getCurrentTime(); return roundNumber(currentTime, 3); }

edited Apr 04 '14 at 18:29

answered Apr 03 '14 at 17:35

Ben

63
1
9

I'm activating my plugin one the Youtube Page. It is currently the only one open in my browser, just for tests sake. – jmt Apr 03 '14 at 17:42

getCurrentTime() for YouTube Video

4 Answers4

Linked