Belajar HTML Lengkap Part 12 : Cara Membuat Pemutar Video Di HTML
Oke.. kembali lagi sobat! pada kesempataan ini kita bakal ngebahas bagaimana cara menambahkan sebuah video dalam website yang kita buat dengan kode HTML. Video adalah salah satu multimedia yang dapat menjadikan sebuah informasi yang ada menjadi semakin menarik. Saat ini cara membuat sebuah pemutar video dalam website sangat mudah di karenakan HTML Versi 5 mendukung pemutaran video secara langsung pada browser, Tahukah kalian pada versi-versi HTML sebelumnya untuk membuat pemutaran video membutuhkan plugin atau aplikasi tambahahan seperti flash atau menggunakan javascript, bagi seorang yang baru memulai belajar website programming hal tersebut mungkin sedikit ribet.
Cara Menambahkan Pemutar Video Di HTML
Nah bagi teman-teman yang mungkin ingin membuat sebuah website streaming video atau film wajib simak penjelasan berikut ini karena dengan tag HTML versi 5 untuk menampilkan video itu sangat mudah sekali. Cara nya, teman-teman persiapkan terlebih dahulu sebuah folder dan letakan video yang ingin di tampilkan pada folder tersebut di ikuti dengan kode HTML berikut ini dan simpan masih pada folder yang sama, Seperti gambar berikut :
Kode HTML untuk menampilkan/menambahkan pemutar video :
<!DOCTYPE html>
<html>
<head>
<title>Menambahakan Video Pada HTML</title>
</head>
<body>
<video width="400px" controls>
<source src="contoh.mp4" type="video/mp4">
<source src="contoh.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>Tag untuk menambahkan pemutar video Pada HTML :
Tag yang di gunakan untuk menampilkan video pada halaman HTML adalah tag <video> berfungsi sebagai tag pembuka atau pembungkus kemudian di ikuti oleh tag penyusunya yaitu tag <source> ini di gunakan untuk menuliskan alamat dari file video yang ingin di tampilkan pada halaman HTML yang artinya video bisa dari pihak ketiga (external link) ataupun video yang kita punya (internal link) sama seperti cara penulisaan alamat pada link silahkan lihat episode sebelumnya.
Atribut untuk menambahkan pemutar video Pada HTML :
Atribut width dalam tag <video> berfungsi untuk mengatur ukuran lebar video, jika dilihat pada tag <video> atribut height (tinggi) tidak di tuliskan tujuanya adalah supaya ukuran video dapat menyesuaikan secara otomatis sehingga tampilan ukuranya tidak terpaksa.
Atribut controls dalam tag <video> ini berfungsi agar video yang di tampilkan memiliki kontrol seperti play, pause, dan volume.
Atribut src dalam tag <source> ini berfungsi sebagai tempat untuk menuliskan alamat file video yang ingin di tampilkan, Seperti pada contoh di atas file videonya bernama contoh dengan format video adalah .mp4 karena di letakan pada folder yang sama maka penulisanya hanya dengan nama dari file videonya saja, namun jika di letakan pada folder yang berbeda kita harus menuliskan nama folder nya di ikuti dengan nama file nya.
Atribut type dalam tag <source> berfungsi sebagai alternatif format video yang dapat di dukung untuk pemutaran video pada browser. Dan tulisan Your browser does not support the video tag. itu akan muncul ketika format video tidak ada yang mendukung untuk di putar pada browser.
Berikut hasil video yang berhasil di tampilkan pada browser, lihat gambar berikut :
Oke cukup sudah semogga bermanfaat sampai jumpa di episode berikutnya, Semangat teman!
→ kode html video
→ tag video html
→ menampilkan video di html
→ menambahkan video di html
→ memasukan video ke website
→ menyisipkan video di html
→ html5
→ memasukkan video di html notepad
→ Rio Ananda Putra
Incoming search terms :
→ script video html→ kode html video
→ tag video html
→ menampilkan video di html
→ menambahkan video di html
→ memasukan video ke website
→ menyisipkan video di html
→ html5
→ memasukkan video di html notepad
→ Rio Ananda Putra
kak, passwordnya apa?
ReplyDeletekirim ke putut2108@gmail.com dong kak!