TypeError: Fehler beim Ausführen von 'play' auf 'HTMLMediaElement': Ungültiger Aufruf

Question

Nur ein einfaches Problem.

Ich möchte eine HTMLMediaElement Methode zu Variable zuweisen.

// html part 
<video id="player" ... /> 

// js part 
const video = document.querySelector('#player') 
const play = video.play 

video.play() // works! 

play() // error! 

Uncaught (in promise) TypeError: Failed to execute 'play' on 'HTMLMediaElement': Illegal invocation 

jemand weiß, warum dieser Fehler passiert ist?

Answer 1

Die native DOM-Implementierung von HTMLMediaElement.play erfordert, dass this an eine HTMLMediaElement gebunden ist.

video.play() funktioniert, weil der this Wert an video gebunden ist. play() funktioniert nicht, weil der this Wert jetzt an etwas anderes gebunden ist (vielleicht window?).

können Sie entweder nennen es mit:

const video = document.querySelector('#video'); 
 
play = video.play; 
 

 
play.call(video);

<video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls>

oder "es für später speichern" können Sie binden:

const video = document.querySelector('#video'); 
 
play = video.play.bind(video); 
 

 
play();

<video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls>