pondělí, 27 03 2023

HTML video (zpět na obrázek po přehrání videa) onended

Začátek
Předchozí
1
Další
Konec

Vaňková Lucie (lailoo)
Autor tématu
Offline
Pokročilý

Více

28. čec 2017 07:39 #342 od Vaňková Lucie (lailoo)

HTML video (zpět na obrázek po přehrání videa) onended vytvořil uživatel Vaňková Lucie (lailoo)

Ahoj, aktuálně řeším to, že mám video ve stránce vloženo pomocí HTML viz. script níže:

<video height="auto" class="video-home" poster="/img/cms/video_home.png" onclick="this.paused ? this.play(setAttribute('controls','controls')) : this.pause()">
<source src="/img/cms/video_home.mp4" type="video/mp4" />
</video>

kdy před spuštěním je zobrazen obrázek bez jakýchkoliv ovládacích prvků a po kliknutí se video začne přehrávat s tím, že se zastaví na konci čili na poslední vteřině videa a jelikož je video uděláno, tak že se na konci úplně ztmaví jakože efekt zakončení, tak mi zůstane na stránce černý obdelník.
Potřebovala bych, aby se video přeplo zpět na ten původní obrázek.
Vím, že se to dělá něco jako onended, ale nevím, jak to přesně zapsat.

Děkuji za dobré rady.

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.

Danko Velovský (Duvel)
Offline
Pokročilý

Více

28. čec 2017 07:46 #343 od Danko Velovský (Duvel)

Odpověděl Danko Velovský (Duvel) pro téma HTML video (zpět na obrázek po přehrání videa) onended

Ahoj,

můžeš to udělat takto:

na konci startovacího tagu <video> přidáš:

onended="videoEnded(this)"

tedy takto:

<video height="auto" class="video-home" poster="/img/cms/video_home.png" onclick="this.paused ? this.play(setAttribute('controls','controls')) : this.pause()" onended="videoEnded(this)">
<source src="/img/cms/video_home.mp4" type="video/mp4" />
</video>

a pak přidáš do stránky tento kousek javascriptu:

<script>/* video zpet na zacatek */
  function videoEnded(video) {
    video.load();
    video.removeAttribute('controls');
  };</script>

Zavoláš tedy přidáním onended="videoEnded(this)" funkci videoEnded, která vrátí video na začátek a odebere atribut "controls" což jsou ovládací prvky videa.

Prosím Přihlásit se nebo Vytvořit účet připojte se ke konverzaci.