Menyajikan komponen Audio, Video & flash dengan HTML - Praktikum 7

Hallo, Brother and Sister,
Pada kesempatan kali ini saya akan membagikan tutorial(sekaligus tugas sekolah) yang masih berlabel Teknologi. Postingan ini merupakan lanjutan dari post sebelumnya yaitu mengenai Tag - tag di HTML. Kali ini mengenai tentang Bagaimana cara menampilkan/memutar lagu, video, dan flash(animasi) di sebuah Web menggunakan HTML. Untuk lebih jelasnya langsung saja ke tutorialnya.

Menampilkan/Memutar Audio

Selain menampilkan gambar di web, anda juga bisa menampilkan/memutar audio menggunakan sebuah tag di HTML. untuk lebih jelasnya, berikut Codingan dan Hasilnya :

Nah, tag yang digunakan untuk menampilkan sebuah audio yaitu tag <audio></audio> dan didalamnya ada tag<source>. Tag source berguna untuk memanggil sebuah file yang akan kita masukkan ke web. Namun tanpa tag source pun sebenarnya masih bisa menampilkan audio yaitu dengan cara menambahkan attribute src="" dalam tag audio. Anda juga bisa membuat audio tersebut auto play caranya yaitu :

Nah, untuk membuat audio auto play maka tag yang digunakan pun berbeda, yaitu dengan menggunakan tag <embed>. Disini juga anda bisa mengatur tinggi dan lebarnya.

2. Menyajikan Video

Anda juga dapat menampilkan video pada HTML yaitu dengan cara :

Nah, tag untuk menampilkan video yaitu <video></video> dan juga didalamnya ada tag source. Nah, sama seperti audio, tanpa tag source pun sebenarnya masih bisa menampilkan video yaitu dengan cara menambahkan attribute src="" dalam tag video. Oh iya anda juga bisa menggunakan attribute type="" yaitu untuk mendeskripsikan tipe file yang anda tampilkan. Anda juga dapat menampilkan video dengan thumbnail :

Maksud Video Thumbnail ini yaitu sebuah video dimana cover video tersebut dapat kita atur dengan sebuah gambar yang kita inginkan. caranya yaitu menambahkan attribute poster="".

3. Menampilkan file flash(.swf)

Anda juga dapat menampilkan file flash(biasanya game) pada HTML yaitu dengan cara :

Jadi, disini kita juga menggunakan tag embed untuk menampilkan file .swf
Disini juga saya mencoba mengkombinasikan seluruh tag di atas dan yang sudah dibahas di post sebelumnya. Berikut codingan dan hasilnya :

<!DOCTYPE html>
<html>
<head>
	<title>Aip Ariyadi - XI RPL 3 - WebAudioVideo</title>
</head>
<body bgcolor="#17d7cc">
	<center>
	<font face="Dk Lemon Yellow Sun">
	<h1>
Content Creator Youtube</h1>
</font>
    </center>
<table width="100%" bgcolor="Purple">
<tr>
			<th colspan="2"><marquee behavior="" direction="">
			<font face="Monotype Corsiva" color="white" size="4">Selamat datang di Halaman Website kami</font>
			</marquee></th>
		</tr>
<tr>
			<td width="160" rowspan="3" valign="top" bgcolor="#993366">
			<img src="Media/KeryAstina.jpg" alt="foto" width="400px">
			</td >
			<td bgcolor="#993366" valign="top">
			<p>
<font face="Monotype Corsiva" color="white" size="4">
			Nama Populer         Kery Astina <br>
			Nama Lengkap         Kery Kartika Fajar <br>
			Tempat Lahir         Jakarta <br>
			Tanggal Lahir     9 Maret 1995 <br>
			Tempat Tinggal  Bandung <br>
			Profesi                        Youtuber, Selebgram <br>
			Salah Satu lagu Cover Saya : <audio controls>
			<source src="Audio/Kery Astina.mp3" type="audio/mpeg">
			Your browser does not support the audio element.
			</audio> <br> <br>
			This is My Video
			<video width="300" controls>
			<source src="Video/Parody Via Vallen - Sayang (Koplo  Bahasa Indonesia).mp4" type="video/mp4">
			Your browser does not support the video tag.
			</video>
			</font></p>
</td>
		</tr>
</table>
</body>
</html>

Nah, diatas merupakan hasilnya. Oh iya, disini saya menggunakan tag <marquee></marquee> untuk membuat tulisan berjalan. Untuk lebih memudahkan anda untuk membuat HTML dengan menampilkan sebuah file, alangkah baiknya anda membuat folder terlebih dahulu seperti :

Oke segitu saja postingan dari saya untuk kali ini. Mohon maaf bila ada kesalahan, semoga bermanfaat untuk anda. Apabila ada komentar / masukan bisa diisi di kolom komentar. Sampai jumpa di postingan berikutnya dan jika menurut anda Postingan ini bermanfaat bisa diShare ke teman - teman anda.