TypeError: attempted to get private field on non-instance

Understood! Maybe this can be put in documentation if someone wants to use openplayerjs in a Vue.js application:

With 2.7 releases of openplayerjs, the private methods and properties are actually more private than before, this means that, with Vue.js 3, which observes *.vue template variables, by adding reactivity to them, the variable which is used to hold the OpenPlayerJS object is Proxied by Vue’s observers, so, the call to player’s methods, like play(), init(), pause(), etc. are not called on the player object directly, but are called by the reactivity Proxy in a way not compatible with 2.7+ versions of OpenplayerJS. The solution is to assign the OpenPlayerJS instantiation to a non-reactive (so un-Proxied) variable, to do so, Vue.js allows to declare $ variables (variables starting with $) which are not observed by the reactivity Proxy. Thus, going to the point, to use OpenPlayerJS in a Vue Application, you have to declare the object holder like:

data() {
	return {
		$player: null
	};
}

And then use $player in other Vue methods, for example:

mounted() {
	this.$player = new OpenPlayerJS('player');
	this.$player.init();
}

Having declared the HTML template like, for example:

<template>
	<div class="block live players">
		<div class="video-wrapper">
			<video id="player" class="main op-player__media" controls playsInline autoPictureInPicture
				preload="metadata" height="360" :poster="`${currentURL}/assets/thumbnail-video.jpg`">
				<source :src="`${currentURL}/assets/placeholder.m3u8`" type="application/x-mpegURL" />
			</video>
		</div>
	</div>
</template>

@gabrieletassoni if you can prepare a CodePen or similar where I can dig more into this error I’d appreciate it. I have the suspicion that it has to do with this.player declaration, because I’ve used it in other ways and I don’t see the error