`video.play / pause / load` în JavaScript

Formulare, media și canvas Toate browserele moderne

Pornește, oprește și reîncarcă un element video sau audio din JavaScript.

Sintaxă

await video.play()
video.pause()
video.load()

Ce face `video.play / pause / load`

play() pornește redarea și returnează o promisiune, respinsă dacă browserul nu permite redarea automată (de obicei pentru video cu sunet fără o acțiune a utilizatorului). pause() oprește redarea, păstrând poziția în currentTime.

load() reîncarcă elementul de la început, după ce ai schimbat src sau sursele <source>. Proprietăți utile: paused, currentTime, duration, volume, muted.

Ce returnează

play: o Promise. pause și load: undefined.

Exemple

Exemplul 1: Buton de redare și pauză

Rezultatul după două clicuri, la 12 secunde distanță.

const video = document.querySelector("video");
const buton = document.querySelector("#reda");

buton.addEventListener("click", async () => {
  if (video.paused) {
    try {
      await video.play();
    } catch (e) {
      console.log("redare blocată:", e.name);
    }
  } else {
    video.pause();
  }
  console.log(video.paused ? "pauză" : "redare", video.currentTime.toFixed(1));
});

Rezultat în browser

redare 0.0
pauză 12.4

Greșeli frecvente

Apelezi video.play() la încărcare pentru un video cu sunet și nu tratezi promisiunea. Primești NotAllowedError; pentru redare automată adaugă muted.

Comenzi înrudite

requestFullscreen / exitFullscreen: Afișează un element (video, joc, galerie) pe tot ecranul și revine la pagina normală.
addEventListener: Rulează o funcție când se întâmplă ceva pe pagină: un clic, o tastă, trimiterea unui formular.
async / await: Scrie cod asincron care se citește ca un cod obișnuit, de sus în jos.

Ce face video.play / pause / load