July 17, 2024

Input Video dan Audio Menggunakan HTML 5

2 min read

Assalamu’alaikum Warahmatullahi Wabarokatuh. 
Halo sahabat PalComSter! Kali ini aku mau berbagi info dan tips ne, untuk membuat web lebih mantap, kita perlu memasukkan video atau audio ke website kita, makanya kali ini saya akan mengajarkan cara memasukkan video & audio ke website menggunakan HTML5. Sebelumnya kita perlu mengatahui bahwa setiap browser men-support audio dan video dengan tipe yang berbeda-beda, jadi yang paling baik itu kalau kita menyediakan video/audio yang sama dengan format yang berbeda-beda.

Berikut hasil akhir yang akan kita buat:

Langkah 1

Mari kita mulai dengan cara memasukkan audio , masukkan kode berikut:

[sourcecode languege=”php”]
<audio controls muted>
<source src="Wildlife.ogg" type="audio/ogg">
<source src="Wildlife.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
[/sourcecode]

berfungsi untuk memainkan audio yang dipilih, file audio harus bertipe ogg (audio/ogg) atau wav (audio/wav) atau mp3 (audio/mpeg), beberapa source bisa dimasukkan (contohnya mp3 dan ogg, jadi kalau browser tidak support mp3 tapi ogg audio masih bisa dimainkan, atau sebaliknya)
Di tag audio, ada beberapa properti yang bisa dimasukkan:

  • autoplay berfungsi agar audio otomatis di-play setelah siap untuk dimainkan
  • controls berfungsi menampilkan tombol play,pause,volume, dll.
  • loop berfungsi agar audio dimainkan berulang-ulang
  • muted apakah audionya mau di-mute atau tidak
  • preload (auto, metadata, none) apakah audionya load pada saat pagenya sedang diload?
  • src menunjukkan URL dari audio yang akan dimainkan (yang ini tidak diperlukan kalau sudah ada )

Langkah 2

Sedangkan untuk video, pada dasarnya mirip audio, masukkan kode dibawah ini :

[sourcecode languege=”html”]
<video width="420" height="280" controls="controls" poster="winnie.jpg">
<source src="small.mp4" type="video/mp4" />
<source src="small.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
[/sourcecode]

Format video harus mp4 atau webM atau ogg (lagi, setiap browser mendukung format yang berbeda-beda). Untuk properti, semuanya sama dengan untuk <audio>, hanya saja ada beberapa properti yang ada di <video> tapi tidak  ada di <audio>

  • width & height untuk mendefiniskan lebar dan tinggi video
  • poster mendefinisikan URL gambar yang akan dimunculkan saat videonya sedang buffer, atau sebelum di-play oleh user

Nah bagaimana PalComSter? Tutorialnya mudahkan? Selamat mencoba dan semoga bermanfaat :).

[download id=”625″]

0 thoughts on “Input Video dan Audio Menggunakan HTML 5

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.