TypeError： 'HTMLMediaElement'で 'play'を実行できませんでした：不正な呼び出し

Question

単なる問題です。

HTMLMediaElementメソッドを変数に割り当てたいとします。

// 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 

誰でもこのエラーが発生した理由を知っていますか？

Answer 1

HTMLMediaElement.playのネイティブDOM実装では、thisをHTMLMediaElementにバインドする必要があります。

video.play()thisの値がvideoにバインドされているためです。 play()thisの値が別の値にバインドされているため（おそらくwindow？）、機能しません。

あなたが使用してそれを呼び出すことができ、次のいずれか

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

 
play.call(video);

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

またはバインドを使用して "後でそれを保存"：

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

 
play();

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