TypeError：无法执行＆＃39; play＆＃39; on＆＃39; HTMLMediaElement＆＃39;：非法调用

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？）。

您可以使用以下方式调用它：

＆＃13;

＆＃13;

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

play.call(video);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或＆＃34;保存以供日后使用＆＃34;使用bind：

＆＃13;

＆＃13;

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

play();

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;