Help with PeerTube Embedded Player API

PeerTube
1

Hi there! I’m trying to understand the player API:

And I wrote some simple code to test it.

Basically, I want to log when a video changes status (playing/paused/ended) and while it’s playing (ONLY while it’s playing), I want to log the position in the video.

So, I followed the instructions in the guide, but I’m getting some odd bugs. Here’s my code (it’s a .html file):

<!DOCTYPE html>
<html>

  <script src="https://unpkg.com/@peertube/embed-api/build/player.min.js"></script>

  <h1>PeerTube test</h1>

<iframe id="player" title="&quot;Цапля и журавль&quot; © Союзмультфильм, 1974 г. Советский мультфильм для детей. Смотреть онлайн." src="https://p2ptv.ru/videos/embed/4be9a87a-5081-4ebd-b244-5b1928b104dd?api=1" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" width="480" height="360" frameborder="0"></iframe>

    <script>
// div with class vjs-poster has the preview thumbnail image.
// https://p2ptv.ru/lazy-static/previews/55dcac25-61f6-4702-b240-a8d3571fcf1a.jpg

const PeerTubePlayer = window['PeerTubePlayer'];

let player = new PeerTubePlayer(document.querySelector('#player'));

const logStatus = (e) => console.log(e);
	
const initialize = async () => {
	await player.ready; // wait for the player to be ready
	console.log({player});

	// now you can use it!	

	player.addEventListener('playbackStatusChange', (e) => {
		logStatus(e); // either "playing" or "paused" or "ended"
		
		if (e === 'playing') {
			player.addEventListener('playbackStatusUpdate', logStatus);
		} else {
			console.log('listener removed');
			player.removeEventListener('playbackStatusUpdate', logStatus);
		}
	});
}
initialize();


  </script>
</html>

It works in that the video loads, it logs the video state changes, and it starts logging the detailed video info every half-second after I click play for the first time.

But there are some bugs.

First of all, I’m getting the following 3 errors in the console:

SecurityError: Permission denied to access property "document" on cross-origin object [content-script.js:28](moz-extension://1b86d58b-56fc-4371-8a3c-8975f6759c46/content-script.js)

Cannot import or register plugin web-monetization. Error: This helper is not implemented in embed.

HLS.js error: mediaError - fatal: false - bufferStalledError

Object { type: "mediaError", details: "bufferStalledError", fatal: false, buffer: 8.122643 }

[586.8cd713c8565c96e0b342.chunk.js:1:3157](https://p2ptv.ru/client/standalone/videos/586.8cd713c8565c96e0b342.chunk.js)

Also, logStatus() keeps firing even after removeEventListener() is called - if the video is paused or ended, it STILL logs the video info every half second.

Can anyone please help?

One more question - is there any way to easily get the video thumbnail image, given a particular video URL or embed URL?

2

Never mind about the thumbnail, I figured out how to do that.

Here’s some code I just wrote where you paste in a PeerTube URL and an embedded video automatically appears on the page as well as a thumbnail image and event logging once the video playback is started:

It still has some of those errors I mentioned, as well as the event listener not actually being removed.

Some help with those issues would be welcome!

3

Slightly updated code:

I see the reason removeEventListener didn’t work - that method doesn’t exist in the PeerTube Player API (oops). So is there no way at all to remove a listener?

I’m not getting the « bufferStalledError » any more, for some reason.
But I’m still getting the « Permission denied to access property « document » » error and the « web-monetization » error.

4

Hi,

SecurityError: Permission denied to access property "document" on cross-origin object [content-> script.js:28](moz-extension://1b86d58b-56fc-4371-8a3c-8975f6759c46/content-script.js)

Can you paste a URL so I can reproduce this error? Did you try with another web browser?

This is an error from an installed plugin on the peertube instance. Not related to your script.

Also, logStatus() keeps firing even after removeEventListener() is called - if the video is paused or ended, it STILL logs the video info every half second.

Thanks! There was a bug in the peertube library. It should be fixed by v0.0.6 (https://unpkg.com/@peertube/embed-api@0.0.6/build/player.min.js)