Bagaimana untuk memainkan video menggunakan javascript?

Question

Saya mempunyai HTML dengan elemen video, tiada kawalan dan butang untuk memainkan video. Tetapi apabila saya cuba memainkan video menggunakan butang, ia tidak melakukan apa-apa.

Saya tidak mendapat sebarang ralat dalam konsol dan video tidak dimainkan.

Saya tidak dapat memikirkan apa yang boleh salah.

Apabila saya menambah atribut kawalan dalam teg video, video dimainkan dengan sempurna, tetapi matlamat saya adalah untuk tidak menggunakan kawalan penyemak imbas dan membina kawalan saya sendiri.

Berikut ialah contoh kod saya. Saya menggunakan video rawak ini di sini supaya sumbernya berfungsi.

Saya harap seseorang boleh membantu. Terima kasih terlebih dahulu.

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

Tukar listener eventListener kepada:

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

Answer 2

Masalah dengan kod ialah apabila kaedah video.play disediakan sebagai fungsi pendengar acara, ia kehilangan konteks dan gagal. Masalah ini boleh diselesaikan dengan merangkum kaedah dalam fungsi tanpa nama. Sila semak fungsi playButton.addEventListener(){...} di bawah:

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

 
    Play