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

  • Vaňková Lucie (lailoo)
  • Avatar uživatele Vaňková Lucie (lailoo) Autor tématu
  • Offline
  • Začátečník
  • Začátečník
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.

Více
28. čec 2017 07:46 #343 od Duvel (Duvel)
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.

Přihlášení