abc HTML5 i CSS TUTORIAL

Poster za videa /VIDEO POSTER/ poster="


Slika 1. Tip TAG-a

Poster za videa /VIDEO POSTER/ poster="
Sintaksa: <video id="video_1" width="Širina" height="Visina" poster="imeSlike">
<source src="Putanja/ImeVideo.ektstenzija" type="video/TipVidea">

  • Putanje - puna adresa foldera na kojem se nalazi video.
  • ImeVideo - putanja i puno ime slike (sa ekstenzijom)
  • TipVidea - tip formata videa mp4, ogg
  • imeSlike - Ime slike koja se prikazuje prije staranja videa.


Slika 2. Primjer videa

Autor video klipova na ovoj stranici je Aleksa Majkić.

Primjer 1. Video je na podfolderu snimak. Ime videa je 1.mp4. Podestii poster prije početka izvođenja izvođenja sliku 21.jpg sa folera snimak.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>controls</p>
<video id="video_1" controls poster="snimak/21.jpg">
<source src="snimak/1.mp4" type="video/mp4">
</video>
</body></html>

Primjer 2. Video je na podfolderu snimak. Ime videa je 2.mp4. Kreirati da video TAG.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>controls</p>
<video id="video_1" controls="controls" poster="snimak/1.jpg">
<source src="snimak/2.mp4" type="video/mp4">
</video>
</body></html>

controls

Primjer 3. Video je na podfolderu snimak. Ime videa je 3.mp4. Kreirati da video TAG.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>controls</p>
<video id="video_1" controls>
<source src="snimak/3.mp4" type="video/mp4">
</video>
</body></html>

controls

Primjer 4. Video je na podfolderu snimak. Ime videa je 4.mp4. Kreirati da video TAG.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>controls</p>
<video id="video_1" controls>
<source src="snimak/4.mp4" type="video/mp4">
</video>
</body></html>

controls

autoplay="autoplay"

loop="loop"

Daljnji rad 1:

Kreirati video kod za video snimak/02.mp4

Kreirati video kod za video snimak/03.mp4

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index