Tutorial Belajar HTML5 Bagian 23 : Cara Menyematkan File Video & Audio di HTML

0
27

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar HTML5 Bagian 22 : Struktur Dokumen Pada HTML5, selanjutnya kita akan mempelajari cara menyematkan file video & audio di HTML.

HTML5 memiliki fitur dukungan memainkan audio dan video tanpa memerlukan file Flash.

Tag <audio> dan <video> HTML5 memudahkan untuk menambahkan media ke web.

Anda tinggal mengatur atribut src untuk mengidentifikasi sumber media dan menyertakan atribut control sehingga pengguna dapat memutar dan menjeda media.

Menyematkan Video

Berikut adalah susunan kode sederhana dari menyematkan file video di halaman web Anda, pada contoh saya akan menggunakan video yang berasal dari Youtube :

<video src = "foo.mp4"  width = "300" height = "200" controls>
   Browser Anda tidak mendukung elemen <video>.   
</video>

Spesifikasi draf HTML5 saat ini tidak menentukan format video mana yang harus didukung browser di tag video. Tetapi format video yang paling umum digunakan adalah –

  • Ogg – File Ogg dengan codec video Thedora dan codec audio Vorbis.
  • mpeg4 – File MPEG4 dengan codec video H.264 dan codec audio AAC.

Anda dapat menggunakan tag <source> untuk menentukan media dengan jenis media dan banyak atribut lainnya.

Elemen video mengizinkan beberapa elemen sumber dan browser akan menggunakan format pertama yang dikenali :

<!DOCTYPE HTML>

<html>
   <body>
      
      <video  width = "300" height = "200" controls autoplay>
         <source src = "https://static.mailster.co/videos/mailster_editor.mp4" type = "video/mp4" />
         Browser Anda tidak mendukung elemen <video>.
      </video>
      
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Spesifikasi Atribut Video

Tag video HTML5 dapat memiliki sejumlah atribut untuk mengontrol tampilan dan nuansa serta berbagai fungsi kontrol :

No.Atribut & Deskripsi
1autoplay
Atribut ini digunakan jika kita ingin video diputar secara otomatis, segera setelah data video dimuat ke browser.
2autobuffer
Atribut ini digunakan jika kita ingin membuat video secara otomatis memulai buffering meskipun tidak disetel untuk diputar secara otomatis.
3control
Atribut ini berfungsi untuk menampilkan tombol control seperti, play, pause, volume pada tampilan video.
4height
Atribut ini menentukan tinggi area tampilan video.
5loop
Atribut ini berfungsi untuk memainkan kembali file video dari awal ketika video sudah habis ditayangkan.
6preload
Atribut berfungsi untuk menetapkan bahwa video akan dimuat saat halaman dimuat, dan siap dijalankan. Atribut ini akan diabaikan jika kita menggunakan atribut autoplay.
7poster
Atribut ini berfungsi untuk menampilkan gambar, poster video ketika file video belum dimainkan.
8src
Atribut ini berisi alamat URL video yang akan disematkan.
9width
Atribut ini menentukan lebar area tampilan video.

Menyematkan Audio

HTML5 mendukung tag <audio> yang digunakan untuk menyematkan konten suara dalam dokumen HTML atau XHTML sebagai berikut.

<audio src = "https://mbahwp.com/wp-content/uploads/2021/02/audio.wav" controls autoplay>
   Browser Anda tidak mendukung elemen <audio>.   
</audio>

Spesifikasi draf HTML5 saat ini tidak menentukan format audio yang harus didukung browser di tag audio. Tetapi format audio yang paling umum digunakan adalah ogg, mp3 dan wav.

Anda dapat menggunakan <source> tag untuk menentukan media dengan jenis media dan banyak atribut lainnya.

Elemen audio memungkinkan beberapa elemen sumber dan browser akan menggunakan format pertama yang dikenali.

<!DOCTYPE HTML>

<html>
   <body>
      
      <audio controls autoplay>
         <source src = "https://mbahwp.com/wp-content/uploads/2021/02/audio.wav" type = "audio/wav" />
         Browser Anda tidak mendukung elemen <audio>.
      </audio>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut :

Spesifikasi Atribut Audio

Tag audio HTML5 dapat memiliki sejumlah atribut untuk mengontrol tampilan dan nuansa serta berbagai fungsi kontrol :

No. Atribut & Deskripsi
1autoplay
Atribut ini berfungsi untuk memutar audio secara otomatis begitu file audio dimuat di browser.
2autobuffer
Atribut ini digunakan jika kita ingin membuat audio secara otomatis memulai buffering meskipun tidak disetel untuk diputar secara otomatis.
3control
Atribut ini berfungsi untuk menampilkan tombol control seperti, play, pause, volume pada tampilan audio.
4loop
Atribut ini berfungsi untuk memainkan kembali file video dari awal ketika audio sudah habis ditayangkan.
5preload
Atribut berfungsi untuk menetapkan bahwa audio akan dimuat saat halaman dimuat, dan siap dijalankan. Atribut ini akan diabaikan jika kita menggunakan atribut autoplay.
6src
Atribut ini berisi alamat URL audio yang akan disematkan.

Semoga tutorial ini membantu Anda untuk mempelajari cara menyematkan file video & audio di HTML lengkap dengan penggunaan atributnya dalam dokumen.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.