TypeError：无法在“ HTMLMediaElement”上执行“播放”：非法调用

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

的DOM原生实现HTMLMediaElement.play需要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>

或使用bind“保存以备后用”：

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

play();

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