如何使用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