如何使用javascript来播放视频？

Question

我有一个带有视频元素的 HTML，没有控件和一个用于播放视频的按钮。 但是当我尝试使用按钮播放视频时，它没有执行任何操作。

我在控制台中没有收到任何错误，并且视频无法播放。

我无法弄清楚可能出了什么问题。

当我在视频标签中添加控件属性时，视频可以完美播放，但我的目标是不使用浏览器控件并构建自己的控件。

这是我的代码示例。我在这里使用了这个随机视频，以便来源有效。

我希望有人能帮帮忙。提前致谢。

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

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

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

Answer 1

将 eventListener 的 listener 更改为：

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

Answer 2

代码的问题在于，当 video.play 方法作为事件侦听器函数提供时，它会丢失上下文并失败。可以通过将该方法封装在匿名函数中来解决该问题。 请检查下面的 playButton.addEventListener(){...} 函数：

const video = document.querySelector('video');
const playButton = document.querySelector('button');
playButton.addEventListener('click', function() {
 video.play();
});

 
    Play