Belajar HTML Part 6 Menambahkan Multi Media
Assalamualaikum Wr. Wb
PENGERTIAN
Apa itu multimedia ? Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi audio dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya, dan berkomunikasi. Multimedia hadir dengan berbagai format dan hampir dapat menjadi apapun yang kita dengar atau lihat. Seperti teks, gambar, musik, suara video rekaman, film, animasi dan sebagainya.
Pada pertama kali penggunaan browser internet hanya mendukung teks saja, bahkan teks yang didukungpun sangat terbatas hanya pada satu jenis huruf saja dalam satu warna. Kemudian pada perjalanannya browser pun datang dengan dukungan pada warna, jenis huruf dan teks style, serta menambahkan dukungan untuk gambar untuk selanjutnya mendukung penambahan multimedia dan akan masih terus berkembang. Dukungan untuk suara, animasi dan video ditangani secara berbeda-beda pada setiap browser. Beberapa elemen dapat ditangani oleh browser itu sendiri namun, ada juga beberapa elemen yang membutuhkan sebuah program pembantu tambahan (plug-in).
Pada umumnya elemen multimedia (seperti suara/video) disimpan dalam file media dan cara yang paling umum untuk melihat format sebuah media adalah dengan melihat ekstensi yang digunakan oleh file tersebut. Ketika browser menemukan file berekstensi ".htm/.html" maka browser akan berasumsi bahwa file tersebut merupakan halaman HTML. Ektensi ".xml" diindikasikan sebagai file XML dan ekstensi ".css" diindikasikan sebagai file style sheet, sedangkan ekstensi untuk format gambar yang diakui seperti ".jpg , .gif , dan lain-lain. Selain itu elemen multimedia juga mempunyai format filenya sendiri yang memiliki ekstensi yang berbede-beda seperti .swf , .wmv , .mp3 , dan .mp4.
LATAR BELAKANG
Memudahkan dalam menambahkan file multimedia dari direktori kita ke dalam web dengan menggunakan HTML tersebut.
MAKSUD & TUJUAN
- Memberikan kemudahan dalam menambahkan filenya, karena hanya memasukkan url dari file tersebut berada.
- Mendukung beberapa browser
- Dapat mengatur ukuran, panjang kecilnya multimedia tersebut.
ALAT & BAHAN
- PC/Laptop
- Text Editor
- Browser
- File Multimedia
LANGKAH KERJA
Multimedia itu bermacam-macam jenisnya, mulai dari gambar, suara, rekaman, video, audio, film, dll. Pada kesempatan kali ini kita akan belajar menambahkan audio dan video pada HTML.
- Video
Yang pertama kita akan belajar menambahkan video dengan html. Sebelum HTML5 video hanya bisa diputar di browser dengan plug-in (flash). Tapi di HTML5 kali ini bisa menentukan cara standar menanamkan video tersebut di dalam web. Untuk menambahkan video tersebut dapat menggunakan syntax berikut.
<video width="320" height="240" controls>
<source src="url" type="video/mp4">
<source src="url" type="video/ogg">
</video>
Nb: syntax control berfungsi untuk memeberikan kontrol bermain seperti play, pause, stop. Kemudian syntax width & height mengatur ukuran video tersebut, kemudian syntax src berfungsi untuk menambahkan alamat dari video tersebut, dan type yaitu tipe dari file tersebut. Contoh penggunaanya.
Pertama salin kode di atas, kemudian ganti srcnya dengan videomu sendiri. Kemudian save dalam bentuk html, dan jalankan di browser. Jika berhasil maka tampilannya akan seperti ini.
Nah sudah pada tahukan tentang syntax control tadi, dari gambar di atas bisa disimpulkan bahwa syntax controls berfungsi menambahkan kontrol pada video tersebut. Selanjutnya kita akan menambahkan Audio di dalam HTML.
- Audio
Sama halnya dengan video, audio sebelum ada HTML5 hanya bisa diputar di dalam browser yang ada plug-innya saja. Tapi semenjak ada HTML5 audio bisa menentukan cara standar aga dapat diputar di halaman web. Untuk menambahkan audio ke dalam HTML dapat menggunakan syntax berikut.
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Syntaxnya hampir sama dengan video hanya berbeda tag pembuka dan penutupnya. Jadi langsung saja kita coba untuk menambahkan audio ke dalam HTML. Berikut adalah contohnya.
Perintahnya sama hanya tinggal mengganti nama filenya. Kemudian kita coba lihat hasilnya, jalankan di browser kalian kemudian lihat. Hasilnya akan seperti ini.
Kemudian untuk menjalankannya tinggal klik tombol play pada audio di atas.
Selesai mudah bukan, tinggal kita percantik tampilannya.
Mungkin itu saja dari saya kurang lebihnya mohon maaf.
Jangan lupa klik ikuti di pojok bawah :D
Syukron
Wassalamualaikum Wr. Wb.
Referensi
Post a Comment