Cara Menampilkan Video di HTML5

Cara Menampilkan Video di HTML5 - Selamat pagi gan, seperti judul postingan di atas hari ini kita akan membahas cara menampilkan video di HTML5.  Salah satu Kelebihan HTML5 adalah kemudahan untuk menampilkan file video pada halaman web tanpa harus menggunakan Plugin Khusus atau plugin tambahan seperti Flash. Tetapi cukup hanya dengan menggunakan Elemen baru HTML5 yang ada. Elemen yang digunakan untuk menampiklan video adalah element <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 agan mempunyai video dengan format video bukan ogg, mp4, dan webm. Agan 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 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/SsR5P-zWXuM" frameborder="0" allowfullscreen></iframe>

Maka hasil previewnya akan seperti di bawah ini :



Nah bagaimana gan menarik kan? sekian pembahasan kita tentang Menampilkan Video di HTML5. Semoga bermanfaat.