Menampilkan Video dan Audio dengan HTML5

HTML5 adalah jenis html yang terbaru seperti munculnnya fitur-fitur baru yang sebelumnya belum ada. Ada beberapa fitur baru ini yang bisa kalian gunakan dengan cukup mudah. Seperti halnya menampilkan video atau audio dengan HTML5. Sesuai dengan pembahasan kita kali ini adalah bagaimana cara menampilkan video dan audio dengan HTML5.

Dahulu untuk menampilkan video ataupun audio tidak bisa hanya menggunakan HTML saja. Kita membutuhkan yang namanya plugin. Plugin dulu hanya tersedia menggunakan flash, namun kekuranganya adalah website kita akan menjadi berat. Maka dari itu setelah ada perubahan dan penambahan sintax pada HTML5, diharapkan teknologi lama yang membuat berat website kita sudah mulai ditinggalkan. Perbedaanya jelas sekali terasa, dari mulai load konten lebih ringan, dan segi penulisan coding pun lebih dipermudah.

Untuk memahami lebih lanjut ada baiknya kita mulai saja prakteknya. Pertama kalian bisa salin contoh code untuk video dan audio dibawah ini.

video.html

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

</body> 
</html>

Jika sudah kalian simpan denngan format .html. Untuk melihat hasilnya, kalian bisa buka file tersebut pada browser kalian. Maka tampilanya akan seperti ini.

menampilkan-video-dan-audio-dengan-html5-rangga1-070817

Sekarang kita lanjut untuk menampilkan audio dengan html5. Caranya kurang lebih sama seperti video, hanya nama tagnya berbeda. Untuk lebih jelasnya kalian bisa ikuti contoh code berikut ini.

audio.html

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Kalian simpan file tersebut dengan format html. Untuk melihat hasilnya bisa dibuka lewat browser kalian, dan tampilanya akan muncul seperti ini.

menampilkan-video-dan-audio-dengan-html5-rangga2-070817

Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara menampilkan video dan audio pada HTML5. Semoga artikel kali ini dapat bermanfaat dan menjadi inspirasi bagi kalian semua. Sampai jumpa pada artikel seru selanjutnya

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

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