Monday, November 9, 2015

Cara Memasukkan Video ke Browser dengan HTML5

Penulis Anonshark Channel Diterbitkan November 09, 2015

HTML5 merupakan versi modern dari HTML yang disusun oleh World Wide Consortium (W3C) yang fungsi nya sebagai standar dari kerangka HTML di browser. Namun masih banyak dari browser yang belum support HTML5 dikarena versi browser yang lama. Untuk kelancaran tutorial ini saya menyarankan agar sobat untuk menggunakan browser versi terbaru. Berikut gambaran mengenai browser yang support HTML5.

Bisa dilihat dari gambaran diatas, Untuk warna hijau merupakan browser yang sudah support HTML5. Sedangkan, untuk warna merah merupakan browser tidak support HTML5. Untuk lebih jelas nya sobat bisa ke www.caniuse.com atau ke www.html5test.com untuk melihat lebih lengkap versi browser sobat apakah support atau tidak. Oke sekarang kita praktikan bagaimana cara mengembed atau memasukkan video kedalam browser.

Langkah pertama sobat buat terlebih dahulu file dan folder nya, pada contoh ini saya membuat file bernama video.html di folder test di var/www/html. Apabila sobat menggunakan xampp bisa taruh di folder htdocs.

Langkah kedua ketikan script berikut :

<!DOCTYPE html>
<html>
<head>
            <title>Memasukkan Video ke Browser</title>
</head>
<body>

    <video src="oasis.mp4" controls>
      Browser Anda tidak support, Segera upgrade Versi Browser Anda
    </video>

</body>
</html>

Save lalu sobat pindah ke browser, localhost/namafile.html Berikut tampilan dari hasil script diatas.

Sedikit penjelasan mengenai script diatas. Untuk dapat memasukkan video ke browser harus menggunakan tag <video> diikuti dengan src atau tempat sobat menyimpan file yang dimana format nya ialah .mp4. serta controls digunakan untuk mengatur video di browser agar dapat di Play, Pause, Mute, dan mengatur Volume suara video. Dan akhiri dengan tag penutup </video>.

Note : Selain format .mp4, Tipe HTML video yang disediakan lainnya yaitu .ogg dan .webm

Sekian cara memasukkan video ke browser dengan HTML5, Apabila sobat mempunyai pertanyaan silahkan berkomentar di kolom komentar yang sudah disediakan. Selamat mencoba dan semoga bermanfaat.