Video dan HTML5

Hallo gan, bro, sist thanks atas kunjungannya. ..

Nih gan salah satu kelebihan pada HTML5 adlaah memberikan kemudahan untuk menampilkan file video pada halaman web tanpa harus menggunakan Plugin Khusus atau Plugin tambahan seperti Flash, Elemen yang digunakan untuk menampilkan video adalah tag elemen <video>

Browser yang support untuk menampilkan video di HTML5 :

 Jenis format video yang mendukung tag video pada HTML5 yaitu :

• Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
• MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
• WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)

Dan dibawah adalah browser yang support dengan format tipe video :

Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

Sintaks penulisan untuk menampilkan video di HTML5 :

<video src="judulvideo.ogg" controls="controls">

</video>

atau bisa juga seperti dibawah ini :

<video controls="controls"><source src="judulvideo.webm" type="video/webm"></video>

*ganti judulvideo.xxx dengan nama dan format video yang akan ditampikan

Untuk melengkapi penggunaan element, agan dapat menambahkan beberapa atribut :

• width=”dalam pixel” (Untuk Menentukan lebar video)
• height=”dalam pixel” (Untuk Menentukan tinggi video)
• controls=”controls” (Untuk Menampilkan tombol kontrol video)
• autoplay=”autoplay” (Untuk Memutar video secara otomatis)
• loop=”loop” (Untuk Mengulangi pemutaran video terus menerus)
• muted=”muted” (Untuk Menghilangkan Output SUara pada Video)
• poster=”URL” (Untuk menampilkan gambar awal sebelum video diputar)

Selain bisa menambahkan sendiri file video dari komputer, ada lagi Kelebihan HTML5 yang lainya yaitu terdapat tag elemen untuk memutar video dari youtube di halaman web kita yaitu dengan penggunaan tag <iframe>. Sintaks penulisanya adalah sebagai berikut :

<iframe width="560" height="315"
src="url video youtube">
</iframe>

*ganti url video youtube dengan cara meng-copy url video di embed dengan klik tab share.

Contoh :

<iframe width="560" height="315" src="https://www.youtube.com/embed/cbI40gEraFE" frameborder="0" allowfullscreen></iframe>

Maka hasil previewnya akan seperti di bawah ini :