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

【问题标题】：TypeError: Failed to execute 'play' on 'HTMLMediaElement': Illegal invocationTypeError：无法在“HTMLMediaElement”上执行“播放”：非法调用
【发布时间】：2017-05-22 09:59:30
【问题描述】：

只是一个简单的问题。

我想将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

有人知道为什么会发生这个错误吗？

【问题讨论】：

我认为您需要将this 绑定到video？ --- 是的，绑定工作，play = play.bind(video)
这个问题感觉像是重复的……但是我找不到重复的目标。
如果您没有找到上一个问题。您可以将答案发布到答案块。
但我只是想知道是否有任何函数式编程方法可以在没有绑定的情况下解决它？
函数式编程方式？ Bind 是函数式编程...

标签： javascript html html5-video

【解决方案1】：

HTMLMediaElement.play 的原生 DOM 实现需要将 this 绑定到 HTMLMediaElement。

video.play() 有效，因为this 值绑定到video。 play() 不起作用，因为 this 值现在绑定到其他东西（可能是 window？）。

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

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

play.call(video);

&lt;video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls&gt;

或使用绑定“保存以备后用”：

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

play();

&lt;video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls&gt;

【讨论】：

我很感激有人评论/编辑这个答案，当play 被调用而不绑定到video 时this 的值是什么。
回复我自己的评论...很可能是undefined。