Apa itu multimedia?
Multimedia datang dalam berbagai format. Ini bisa menjadi hampir semua hal yang dapat Anda dengar atau lihat, seperti gambar, musik, suara, video, rekaman, film, animasi, dan banyak lagi.
Halaman web sering berisi elemen multimedia dari berbagai jenis dan format. Multimedia di web adalah suara, musik, video, film, dan animasi.
Dukungan Browser
Browser web pertama memiliki dukungan untuk teks saja, terbatas pada satu font dalam satu warna.
Kemudian datang browser dengan dukungan untuk warna, font, gambar, dan multimedia!.
Format Multimedia
Elemen multimedia (seperti audio atau video) disimpan dalam file media.
Cara paling umum untuk menemukan jenis file, adalah dengan melihat ekstensi file.
File multimedia memiliki format dan ekstensi yang berbeda seperti: .wav, .mp3, .mp4, .mpg, .wmv, dan .avi.
Format Video Umum
 | Ada banyak format video di luar sana. Format MP4, WebM, dan Ogg didukung oleh HTML. Format MP4 direkomendasikan oleh YouTube. |
Contoh Pengambilan Media HTML
Contoh-contoh ini telah diadaptasi dari bagian Contoh dari spesifikasi HTML Media Capture.
Contoh-contoh menunjukkan bagaimana memberikan petunjuk bahwa lebih disukai bagi pengguna untuk menangkap media dari jenis MIME tertentu menggunakan kemampuan tangkapan media dari perangkat hosting. Baik contoh deklaratif sederhana menggunakan formulir HTML, serta contoh yang lebih maju termasuk scripting, disajikan.
Pengujian hanya untuk keberadaan atribut.
Tampaknya @capture tidak didukung dan @accept didukung.
Contoh 1
Untuk mengambil gambar menggunakan perangkat pengambilan gambar diam lokal perangkat, seperti kamera, dan unggah gambar yang diambil menggunakan formulir HTML:
<input type="file" accept="image/*" capture>
Contoh 2
Atau sebagai alternatif, untuk merekam video menggunakan kamera video lokal perangkat:
<input type="file" accept="video/*" capture>
Contoh 3
Atau sebagai alternatif, untuk menangkap audio menggunakan mikrofon lokal perangkat:
<input type="file" accept="audio/*" capture>
Contoh 4-7
Untuk kasus penggunaan lanjutan lainnya, tentukan atribut pengambilan dalam markup dan tangani pengunggahan file dalam skrip melalui XMLHttpRequest:
<input type="file" accept="image/*" capture>Contoh tanpa @capture
<input type="file" accept="image/*"><input type="file">Contoh ini menurunkan cara menggunakan @capture dan @accept bersama dengan @download.
Petunjuk: Klik tombol di bawah ini untuk menangkap gambar menggunakan kamera Anda. Ketika Anda mengklik Buka di pemilih file, browser Anda akan menanyakan di mana Anda ingin menyimpan gambar yang baru Anda tangkap, atau akan segera diunduh, tergantung pada pengaturan default Anda. Jika @download tidak didukung, Anda akan diberikan tautan Simpan File.
HTML MEDIA VIDIO
<video>Cara Kerjanya
Atribut menambahkan kontrol video, seperti putar, jeda, dan volume.controls
Adalah ide yang baik untuk selalu menyertakan dan atribut. Jika tinggi dan lebar tidak diatur, halaman mungkin berkedip saat video dimuat.widthheight
Elemen ini memungkinkan Anda untuk menentukan file video alternatif yang dapat dipilih browser. Browser akan menggunakan format pertama yang dikenali.<source>
Teks antara dan tag hanya akan ditampilkan di browser yang tidak mendukung elemen.<video></video><video>
Format Video HTML
Ada tiga format video yang didukung: MP4, WebM, dan Ogg. Dukungan browser untuk format yang berbeda adalah:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Edge | YES | YES | YES |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | YES | NO |
| Opera | YES | YES | YES |
Video HTML - Jenis Media
| File Format | Media Type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
Video HTML - Metode, Properti, dan Acara
HTML DOM mendefinisikan metode, properti, dan peristiwa untuk elemen.<video>
Ini memungkinkan Anda untuk memuat, memutar, dan menjeda video, serta mengatur durasi dan volume.
Ada juga acara DOM yang dapat memberi tahu Anda ketika video mulai diputar, dijeda, dll.
HTML MEDIA AUDIO
Elemen HTML digunakan untuk memutar file audio pada halaman web.<audio>
AUDIO HTML - Cara Kerjanya
Atribut menambahkan kontrol audio, seperti putar, jeda, dan volume.controls
Elemen ini memungkinkan Anda untuk menentukan file audio alternatif yang dapat dipilih browser. Browser akan menggunakan format pertama yang dikenali.<source>
Teks antara dan tag hanya akan ditampilkan di browser yang tidak mendukung elemen.<audio></audio><audio>
<audio> Putar Otomatis HTML
Untuk memulai file audio secara otomatis, gunakan atribut:autoplay
CONTOH:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Audio HTML - Metode, Properti, dan Acara
HTML DOM mendefinisikan metode, properti, dan peristiwa untuk elemen.<audio>
Ini memungkinkan Anda untuk memuat, memutar, dan menjeda audio, serta mengatur durasi dan volume.
Ada juga acara DOM yang dapat memberi tahu Anda ketika audio mulai diputar, dijeda, dll.
Untuk referensi DOM lengkap, buka Referensi DOM Audio / Video HTML kami.
PLUG-IN HTML
Plug-in adalah program komputer yang memperluas fungsionalitas standar browser.
Plug-in
Plug-in dirancang untuk digunakan untuk berbagai tujuan:
- Untuk menjalankan applet Java
- Untuk menjalankan kontrol Microsoft ActiveX
- Untuk menampilkan film Flash
- Untuk menampilkan peta
- Untuk memindai virus
- Untuk memverifikasi id bank
Elemen <object>
Elemen ini didukung oleh semua browser.<object>
Elemen mendefinisikan objek tertanam dalam dokumen HTML.<object>
Ini dirancang untuk menanamkan plug-in (seperti applet Java, pembaca PDF, dan Flash Player) di halaman web, tetapi juga dapat digunakan untuk memasukkan HTML dalam HTML:
<object width="100%" height="500px" data="snippet.html"></object>
Atau gambar jika Anda suka:
<object data="audi.jpeg"></object>
Elemen <embed>
Elemen ini didukung di semua browser utama.<embed>
Elemen ini juga mendefinisikan objek tertanam dalam dokumen HTML.<embed>
Browser web telah mendukung elemen <embed> untuk waktu yang lama. Namun, itu belum menjadi bagian dari spesifikasi HTML sebelum HTML5.
<embed src="audi.jpeg">
Elemen ini juga dapat digunakan untuk menyertakan HTML dalam HTML:<embed>
<embed width="100%" height="500px" src="snippet.html">
Kesimpulan
Antarmuka HTMLMediaElement menambahkan ke HTMLElement properti dan metode yang diperlukan untuk mendukung kemampuan terkait media dasar yang umum untuk audio dan video.