Multimedia di Halaman Web

Menambahkan Video

1) Format tampilan file Video

          Untuk menampilkan video pada halaman web dapat ditangani secara langsung oleh HTML5. Tag yang digunakan untuk menampilkan video adalah <video> </video>. Namun tidak semua format videonya dapat ditampilkan di web. Sementara ini, hanya beberapa format video yang bisa diproses, di antaranya adalah WebM ,OGG , MP4. Berikut daftar ke kompabilitasan dari masing-masing browser terhadap file video.

         Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp4 di web yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp4 di web yan telah kita buat tersebut. Hal tersebut bisa jadi disebabkan browser yang digunakan tidak support pada file berekstensi mp4.

Bila anda hendak menampilkan video pada halaman web sedangkan file video yang anda miliki berformat seperti *.avi, maka video dengan format *.avi tersebut harus dikonversi terlebih ke format yang didukung oleh HTML5 dengan menggunakan program gratis atau melalui layanan situs web.

Contoh program yang dapat mengkonversi format video adalah :

• Miro Video Converter dapat diunduh secara gratis atau melalui layanan www.microvideoconverter.com .
• FormatFactory -> di unduh gratis di http://format-factory.en.softonic.com
• http://video.online-convert.com -> layanan konversi secara online

2) MIME untuk format Video

    MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format video.

3) Menyajikan file Video pada tampilan web

        File video seperti mp4 dapat dimainkan pada halaman web melalui tag<video> < /video>. Ketika mencoba menjalankan video pada halaman web , file video ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audio nya disesuaikan dengan file audio yang anda gunakan. Berikut adalah format lengkap untuk memainkan video ke dalam aplikasi web

Atribut Height dan Width dalam tag <video> digunakan untuk menentukan tinggi dan lebar penampilan video. Atribut Src menentukan file video.

Bila listing program diatas dijalankan akan menghasilkan tampilan video di browser chrome . Tekan tombol play untuk memulai menjalankan videonya

Gambar video pada tampilan web menggunakan browser chrome

Tag <video> memiliki beberapa atribut, tidak hanya width dan height saja. Kontrol atribut menambahkan kontrol video, seperti play, pause, dan volume. Berikut ini adalah atribut – atribut yang digunakan pada tag <video>.

 

Menambahkan Suara (Audio)

Selain menampilkan gambar, HTML juga memiliki fitur untuk menambahkan pemutar suara (audio) pada dokumen web. Elemen audio digunakan untuk tujuan ini, dan sama seperti elemen img, kita harus memberikan nilai tempat menyimpan file audio melalui atribut src. Tetapi berbeda dengan img, elemen audio memiliki tag penutup:

<audio src="audios/piano.mp3"></audio>

Secara normal, ketika kita memasukkan elemen audio seperti pada kode di atas, kita tidak akan dapat melihat elemen audio, dan bahkan file audio yang dimasukkan tidak akan dapat dimainkan. Untuk menampilkan elemen audio, kita harus menambahkan atribut controls pada elemen:

<audio src="audios/piano.mp3" controls></audio>

dan jika kita ingin memastikan audio dapat dimainkan secara otomatis ketika halaman selesai diunduh oleh browser, kita dapat menggunakan atribut autoplay:

<audio src="audios/piano.mp3" controls autoplay></audio>

Tentunya selain ketiga atribut di atas kita juga memiliki atribut lainnya, yaitu loop dan preload. Seperti namanya, atribut loop digunakan untuk memastikan audio dapat diputar kembali secara otomatis ketika sudah selesai dimainkan. Atribut preload sendiri berfungsi untuk mengatur seberapa banyak data yang ingin dikirimkan ke browser ketika pertama kali mengunduh audio. Atribut preload dapat diisikan dengan tiga nilai, yaitu none, auto, dan metadata. Seperti namanya, none berarti tidak ada data yang diunduh terlebih dahulu, auto melakukan unduh terhadap informasi-informasi mengenai file audio (durasi, nama seniman, dst), dan metadata hanya mengunduh informasi tentang file audio (tanpa mengunduh audio itu sendiri).

Elemen Audio standar pada Chrome

Elemen Figure dan Caption

Pada media cetak tradisional seperti buku, majalah, atau tabloid, sebuah gambar, grafik, atau potongan kode umumnya memiliki sebuah caption berupa keterangan dari apa yang ditampilkan oleh elemen-elemen tersebut. HTML menyediakan elemen figure dan figcaption untuk fasilitas-fasilitas tersebut.
Elemen figure merupakan sebuah block level element yang berfungsi sebagai pembungkus dari media, baik berupa gambar, audio, video, ataupun media-media lainnya. Kita bahkan dapat memasukkan beberapa media sekaligus ke dalam elemen figure. Karena hanya berperan sebagai pembungkus dengan makna semantik (media ini relevan dengan dokumen), kita dapat menuliskan figure layaknya block level element lainnya:

<figure>
    <img src="images/gambar.jpg" alt="gambar dalam figure">
</figure>

dan kemduian, kita dapat menambahkan keterangan pada media tersebut dengan menggunakan elemen figcaption yang harus berada di dalam elemen figure:

<figure>
    <img src="images/gambar.jpg" alt="Contoh Gambar di dalam Figure">

    <figcaption>
    Contoh Gambar di dalam Figure
    </figcaption>
</figure> 

Tweet