如何用JavaScript实现自定义按钮播放无controls属性的视频？

问题出在事件绑定的上下文上：你直接把video.play作为点击事件的处理函数时，play方法内部的this会指向触发点击的按钮元素，而不是目标video元素，导致播放方法无法正确执行。

修复这个问题有两种简单的办法：

方法1：用箭头函数包裹播放调用 #

箭头函数会保留外层作用域的上下文，确保play方法作用在video元素上：

const video = document.querySelector('video');
const playButton = document.querySelector('button');

playButton.addEventListener('click', () => video.play());

方法2：用bind绑定video上下文 #

通过bind方法强制把play方法的this绑定到video元素上：

const video = document.querySelector('video');
const playButton = document.querySelector('button');

playButton.addEventListener('click', video.play.bind(video));

修复后的完整代码示例：

HTML #

<video>
  <source src="https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/video/sintel-short.mp4" type="video/mp4">
</video>
<button>Play</button>

JavaScript #

const video = document.querySelector('video');
const playButton = document.querySelector('button');

// 二选一即可
playButton.addEventListener('click', () => video.play());
// 或者 playButton.addEventListener('click', video.play.bind(video));

这样点击按钮就能正常触发视频播放了，不需要依赖浏览器自带的controls属性。

内容的提问来源于stack exchange，提问作者EdenF