Senin, Januari 21, 2019

Belajar HTML (19): Menyematkan File Multimedia pada Halaman Web

HTML Tutorial Web

Saya tidak perlu tampilkan hasilnya ya, silakan dijalankan dan lihat sendiri.

Ada pertanyaan, bagaimana kalau audionya diputar otomatis dan diputar ulang jika durasinya sudah habis tetapi tanpa menampilkan player?

Caranya mudah. Masukkan atribut loop dan autoplay saja tanpa atribut controls, selesai 😎

Video

Bagaimana memasukkan video ke dalam halaman web? Sebenarnya sama saja dengan audio, bedanya hanya di tag saja yaitu menggunakan <video> ditambah dengan atribut height dan width untuk mengatur ukuran tampilan videonya. Adapun atribut lainnya sama saja termasuk fungsinya seperti controls, loop dan autoplay.

Perbedaan spesifik hanya pada player, untuk file video ada seekbarnya yang dapat digeser dan juga tombol fullscreen.

Kita coba? Oke, Langkah paling cepat dengan save-as file sebelumnya kemudian simpan dengan nama file 46-html-video.html. Ubah dan sesuaikan isi kodenya menjadi seperti ini, contohnya lengkap semua untuk atributnya:

<!DOCTYPE html>
<html>
<head>
   <title>Video</title>
</head>
<body>
   <h2>Memutar file video</h2>
   <video controls loop autoplay width="480" height="340">
      <source src="rabbahu_bidzikrika.mp4">
      Browser Anda tidak mendukung video.
   </audio>
</body>
</html>

Pastikan juga file videonya sudah ada ya… 😉

Setelah dijalankan hasilnya seperti gambar berikut, saya tidak coba lagi untuk browser lain ya, cukup 1 saja 😆

Video Player Web

Untuk tutorial bagaimana menyematkan file multimedia lainnya silakan explore sendiri saja ya 😉 Kita ketemu lagi dipembahasan lain…

← Sebelumnya

Halaman : 1 2 3

Mari sebarkan manfaat kepada orang lain...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *