abc HTML5 i CSS TUTORIAL

Dimenzija videa /VIDEO SIZE/ width="height="


Slika 1. Tip TAG-a

Dimenzija videa /VIDEO SIZE/ width="height=" Sintaksa:


<video width="Širina" height="Visina" controls="controls">
<source src="Ime_videa.mp4" type="video/mp4">
</video>

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


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 video TAG bez navođenja veličine.
Opir rješenja: Aplikacija pronalazi sama veličinu automatski.

Kod

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

controls

Primjer 2. Video je na podfolderu snimak. Ime videa je 1.mp4. Kreirati video TAG sa navođenjem veličine videa width="320" height="240".
Opir rješenja: Aplikacija prikazuje veličinu videa width="320" height="240".

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video_size</title>
</head>
<body>
<p>Veličina videa - controls</p>
<video id="video_1" width="320" height="240" controls>
<source src="snimak/1.mp4" type="video/mp4">
</video>
</body></html>

controls

Primjer 3. Video je na podfolderu snimak. Ime videa je 01.mp4. Kreirati video TAG sa navođenjem veličine videa width="640" height="480".
Opir rješenja: Aplikacija prikazuje veličinu videa width="640" height="480"

Kod

Ekran
<!DOCTYPE html>
<html>
<head>
<title>Video_size</title>
</head>
<body>
<p>Veličina videa - controls</p>
<video id="video_1" width="640" height="480" controls>
<source src="snimak/01.mp4" type="video/mp4">
</video>
</body></html>

controls

Daljnji rad 1:

  1. Kreirati video kod za video snimak/2.mp4 (320x240, 640x480)
  2. Kreirati video kod za video snimak/3.mp4 (320x240, 640x480)
  3. Kreirati video kod za video snimak/4.mp4 (320x240, 640x480)
  4. Kreirati video kod za video snimak/11.mp4
  5. Kreirati video kod za video snimak/12.mp4
  6. Kreirati video kod za video snimak/13.mp4
  7. 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