HTML5 - Video

Ugrađivanje video zapisa u HTML dokument

Ugrađivanje video zapisa na web stranicu nije bilo relativno lako, jer web pretraživači nisu imali jedinstveni standard za definisanje ugrađenih medijskih fajlova poput video zapisa. U ovoj ćemo lekciji pokazati neke od mnogih načina dodavanja videozapisa na web stranice, od najnovijeg HTML5 <video> elementa do popularnih YouTube videozapisa.


Korištenje HTML5 video elementa

Novo predstavljeni HTML5 <video> element pruža standardni način za ugrađivanje videozapisa u web stranice. Međutim, video element je relativno nov, ali radi u većini modernih web pretraživača. Sljedeći primjer jednostavno ubacuje video u HTML dokument, koristeći zadani skup kontrola pretraživača, s jednim izvorno definisanim atributom src. 

<video controls="controls" src="media/shuttle.mp4">
    Vaš pretraživač ne podržava HTML5 Video elemente.
</video>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ugrađivanje video zapisa u HTML stranicu</title>
</head>
<body>
  <video controls="controls" src="/examples/video/shuttle.mp4">
        Vaš pretraživač ne podržava HTML5 Video element.
    </video>
</body>
</html>

Videozapis koristi zadani skup kontrola pretraživača, sa alternativnim izvorima. 

<video controls="controls">
    <source src="media/shuttle.mp4" type="video/mp4">
    <source src="media/shuttle.ogv" type="video/ogg">
     Vaš pretraživač ne podržava HTML5 Video elemente.
</video>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Navođenje zamjenskih izvora za video element u HTML-u</title>
</head>
<body>
  <video controls="controls">
        <source src="/examples/video/shuttle.mp4" type="video/mp4">
        <source src="/examples/video/shuttle.ogv" type="video/ogg">
        Vaš pretraživač ne podržava HTML5 Video element.
    </video>
</body>
</html>

Korištenje element objekta

Element <object> koristi se za ugrađivanje različitih vrsta medijskih datoteka u HTML dokument. U početku se ovaj element koristio za umetanje ActiveX kontrola, ali prema specifikaciji objekt može biti bilo koji medijski objekt kao što su video, audio, PDF datoteke, Flash animacije ili čak slike. Sljedeći fragment koda ugrađuje Flash video u web stranicu. 

<object data="media/blur.swf" width="400px" height="200px"></object>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Umetanje video zapisa pomoću elementa objekta</title>
</head>
<body>
  <object data="/examples/video/blur.swf" width="400px" height="200px"></object>
</body>
</html>

Ovaj će videozapis reprodukovati samo pretraživači ili aplikacije koji podržavaju Flash.


Korištenje ugrađenog elementa

Element <embed> koristi se za ugrađivanje multimedijskog sadržaja u HTML dokument. Sljedeći fragment koda ugrađuje Flash video u web stranicu. 

<embed src="media/blur.swf" width="400px" height="200px">
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Umetanje video zapisa pomoću ugrađenog elementa</title>
</head>
<body>
  <embed src="/examples/video/blur.swf" width="400px" height="200px">
</body>
</html>

Ugrađivanje YouTube video zapisa

Ovo je najlakši i najpopularniji način za ugrađivanje video datoteka u web stranice. Samo otpremite video na YouTube i umetnite HTML kod da bi se video prikazao na vašoj web stranici. Evo primjera cijelog procesa:


Korak 1: Otpremite video

Idite na YouTube stranicu za otpremanje videozapisa i sljedite upute za otpremanje videozapisa ili potražite neki video na YouTube-u.


Korak 2: Stvaranje HTML koda za ugrađivanje videozapisa

Kada otvorite svoj preneseni videozapis na YouTubeu (ili video koji ste našli), vidjećete nešto poput sljedeće slike pri dnu videozapisa. Pregledajte i otvorite svoj otpremljeni videozapis na YouTube-u. Sada potražite dugme za dijeljenje koji se nalazi odmah ispod videozapisa, kao što je prikazano na slici.




Kada kliknete dugme za dijeljenje (share), otvoriće se ploča za dijeljenje koja prikazuje još neka dugmad. Sada kliknite dugme Ugradi (Embad), on će generisati HTML kod za direktno ugrađivanje videozapisa u web stranice. Samo kopirajte i zalijepite taj kod u svoj HTML dokument gdje želite prikazati video i sve je spremno. Prema zadanim postavkama video je ugrađen u iframe.




Možete dalje prilagoditi ovaj ugrađeni kod, poput promjene veličine video zapisa, odabirom opcije prilagođavanja koja je data odmah ispod okvira za unos ugrađenog koda. Sljedeći primjer jednostavno ugrađuje videozapis s YouTube-a. Pogledajmo primjer: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Ugrađivanje YouTube Videa uHTML stranicu</title>
    </head>
    <body>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/n4RjJKxsamQ" 
    frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
    encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
    </iframe>
    
    <p>Izvor: <a href="https://www.youtube.com/watch?
    v=n4RjJKxsamQ&ab_channel=ScorpionsVEVO" target="_blank" 
    rel="nofollow">https://www.youtube.com/watch?
    v=n4RjJKxsamQ&ab_channel=ScorpionsVEVO</a></p>
</body>
</html>