Selamat sore para pengunjung setia blog ini, pada kesempatan yang berbahagia kali ini saya akan menulis dalam kategori baru pada blog ini yakni kategori "html", pada kategori ini saya akan menjelaskan mengenai tag baru dalam html 5. Di dalam tulisan saya yang kali ini saya akan menulis mengenai tag video pada html 5, dimana kita dapat memainkan video melalui web browser dengan cara yang sangat mudah, ok untuk lebih jelasnya silahkan ikuti langkah – langkahnya sebagai berikut:
Pertama buka teks editor favorit kalian, saya menggunakan Codelobster PHP Edition, kemudian buatkan sebuah dokumen .html baru
Kemudian ketikan kode dibawah ini:
<!DOCTYPE HTML> <html> <head> <title>Memainkan Video Melalui Web Browser</title> </head> <body> <!-- Tanda %20 berarti adanya penggunaan spasi --> <video src="Nirvana%20-%20Heart%20Shaped%20Box.mp4" controls="controls"> Your web browser does not support the video tag </video> </body> </html>
Sebagai catatan jika web browser anda tidak dapat atau mendukung tag video, pesan dalam tag video yakni "Your web browser does not support the video tag" akan ditampilkan
Lanjutkan dengan menyimpan dokumen tersebut dengan nama video.html
Kemudian siapkan sebuah video dengan format mp4, kemudian taruh dalam folder yang sama dengan dokumen yang telah kita buat sebelumnya yakni video.html, saya mengunakan video dengan judul Nirvana – Heart Shaped Box.mp4, yang apabila ditulis pada nilai atribut src karakter <spasi> diganti dengan karakter %20
Terakhir akses video.html melalui web browser kalian, jika berhasil hasilnya akan seperti gambar dibawah:
Gambar : tampilan hasil akhir program
Dalam menguji dokumen video.html diatas saya menggunakan web browser google chrome dan format video mp4, ingat masing – masing web browser memiliki kemampuan yang berbeda – beda dalam menjalankan tag baru dalam html5 termasuk tag video beserta format video yang dijalankan
Tag video memiliki beberapa atribut lain seperti yang dijelaskan pada tabel dibawah ini:
| Atribut | Nilai | Deskripsi |
| audio | muted | Keadaan suara |
| autoplay | autoplay | Video akan memulai sesegera setelah video siap |
| controls | controls | Menampilkan tombol kontrol |
| height | pixels | Mengatur tinggi video player |
| loop | loop | Video akan dimainkan lagi jika video telah selesai |
| poster | url | URL dari sebuah gambar yang menjelaskan video |
| preload | preload | Video akan dimuat dan siap untuk dijalankan, mengabaikan "autoplay" |
| src | url | URL video yang akan dijalankan |
| width | pixels | Mengatur lebar video player |
Demikian artikel saya untuk kali ini semoga apa yang saya bagikan mengenai "Memainkan Video Melalui Web Browser", dapat menambah referensi teman – teman sekalian, tunggu artikel dan tulisan menarik saya yang selanjutnya.
0 Comments:
Post a Comment