abc HTML5 i CSS TUTORIAL

Dodavanje videa /INSERT VIDEO/


Slika 1. Tip TAG-a

Dodavanje videa /INSERT VIDEO/
Sintaksa: <video id="video_1" width="Širina" height="Visina" | onclick="play() | control ">
<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
  • onclick="play() - Izvođenje počinje klikom na video
  • controls - omogućuje korisniku upravljanje izvođenjem audia (START, STOP, mjesto početka izvođenja). Na ekranu se pojavljuje upravljački dio:


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. Kreirati da video TAG.
Opis rješenja: CONTROLS omogućuje upravljanje izvođenjem audia (START, STOP, mjesto početka izvođenja). Na ekranu se pojavljuje upravljački dio: . Obrišite onclick="play()" pa controls da uočite razliku.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>onclick</p>
<video id="video_1" onclick="play()" controls>
<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.
Opis rješenja: CONTROLS omogućuje upravljanje izvođenjem audia (START, STOP, mjesto početka izvođenja). Na ekranu se pojavljuje upravljački dio: . Obrišite onclick="play()" pa controls da uočite razliku.

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
</head>
<body>
<p>controls</p>
<video id="video_1" controls>
<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.
Opis rješenja: CONTROLS omogućuje upravljanje izvođenjem audia (START, STOP, mjesto početka izvođenja). Na ekranu se pojavljuje upravljački dio: . Obrišite onclick="play()" pa controls da uočite razliku.

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.
Opis rješenja: CONTROLS omogućuje upravljanje izvođenjem audia (START, STOP, mjesto početka izvođenja). Na ekranu se pojavljuje upravljački dio: . Obrišite onclick="play()" pa controls da uočite razliku.

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

Daljnji rad:

  1. Kreirati video kod za video snimak/11.mp4
  2. Kreirati video kod za video snimak/12.mp4
  3. Kreirati video kod za video snimak/13.mp4
  4. Kreirati video kod za video snimak/14.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