HAMSTER WONJIN: Praktikum 7 : Multimedia Pada HTML

Assalamu'alaikum warrahmatullahi wabarakatuh.

Kali ini kembali lagi bersama saya di postingan tugas yang berikutnya. Kali ini saya akan mencoba menjelaskan dari masing-masing tugas berikut agar siapapun Anda yang berkunjung dapat mencoba codingan ini <3

Materi pertama adalah menyajikan format tampilan audio. Berikut source code nya.

Untuk menampilkan audio, menggunakan tag <audio> lalu cari file audio dalam bentuk MP3 yang kalian punya. Lalu copy path dari audio tersebut dan paste di tag <source>. Jangan lupa untuk save terlebih dahulu lalu buka di Browser untuk melihat hasilnya.

Berikut hasil dari source code milik saya.

Coba klik tombol play dan pastikan volume kalian on untuk mengecek apakah audio terputar atau tidak.

Selanjutnya yang kedua adalah menampilkan embed video dan autoplay. Yaitu audio langsung terputar ketika kita membuka di Browser.

Berikut source code nya.

Gunakan tag <embed> dan atribut <src> untuk menginput file MP3 yang kalian inginkan. Kalian juga bisa menambahkan latar gambar sesuai yang kalian mau^^

Jangan lupa save terlebih dahulu dan coba lihat di Browser untuk melihat hasilnya. Audio harus automatis terputar ketika membuka di Browser, jangan lupa juga untuk memastikan kalian menghidupkan volume nya. Berikut tampilan dari source code milik saya.

Yang ketiga ada menampilkan video. Kalau tadi untuk menampilkan audio maka memakai tag <audio> maka untuk menampilkan video menggunakan tag <video>

Berikut source code nya.

Untuk mengatur ukuran tampilan video bisa menggunakan atribut width dan height. Untuk video, jenis file nya adalah MP4. Setelah sudah memasukan video yang diinginkan jangan lupa save dan buka di Browser untuk melihat hasilnya.

Berikut hasil dari milik saya.

Coba klik play pada video untuk memastikan video dapat diputar atau tidak.

Selanjutnya masih tentang video, yaitu untuk mengatur thumbnail pada video. Berikut source codenya.

Masih sama dengan menggunakan tag <video> untuk mengubah thumbnail, gunakan atribut controls poster pada tag video dan cari gambar yang akan dipakai untuk thumbnail.

Berikut hasil dari milik saya.

Ini adalah tampilan apabila tidak menggunakan thumbnail.

Dan ini adalah tampilan dengan menggunakan thumbnail.

Selanjutnya ada untuk menampilkan flash dalam bentuk file .swf berikut adalah source code nya.

Untuk tampilan flash menggunakan tag <embed> dan atribut src dan input file swf yang akan kalian tampilkan. Apabila kalian tidak mempunyai file swf, kalian bisa mencari dan mendownload sendiri.

Berikut hasil dari tampilan flash.

Terakhir, ada tugas praktikum untuk membuat satu desain yang dimana terdapat audio dan video nya. Berikut yang saya buat untuk tugas ini.

<html>
<head>
 <title>MyMulmed</title>
</head>
<body>
 <form id="form1" name="form1" method="post" action="">
 <table width="800" height="600" border="1" align="center">
<tr>
 <td height="23" align="center" border color="#FFFFFF" bgcolor="CornflowerBlue">
 Crayon Pastel
 </td>
 </tr>
<tr>
 <td height="457" align="center" bgcolor="#CCCCCC">
 <img src="D:\PWPB\Praktikum 7-8\gambar\IMG_20190716_163727.jpg" width="300">
 
Mereka adalah tim bernama Crayon Pastel yang membawakan lagu berjudul 'Pretty Girl' pada Evaluasi Konsep di Produce X 101.Tim ini terdiri dari 6 anggota yaitu Koo Jungmo, Ham Wonjin, Son Dongpyo, Kang Minhee, Song Hyeongjun, dan Lee Jinwoo.Tim ini memiliki Son Dongpyo sebagai center, Ham Wonjin sebagai leader, dan Kang Minhee sebagai main vocal.

Dibawah ini mari dengarkan lagu yang dibawakan mereka yang berjudul 'Pretty Girl'
<audio controls="">
 <source src="D:\PWPB\Praktikum 7-8\audio video\크레파스 - 이뻐이뻐 (Pretty_girl).mp3" type="audio/mpeg">
 </audio>
 
Ada juga video penampilan mereka di panggung M!Countdown.
<video width="320" height="240" controls poster="D:\PWPB\Praktikum 7-8\gambar\wonthumb.jpg">
 <source src="D:\Produce X 101\PERFORMANCE\[MCOUNTDOWN SPECIAL STAGE] Crayon - 'Pretty Girl'.mp4" type="video/mp4"></video>
 </td>
 </tr>
<tr>
 <td height="23" align="center" bgcolor="#CCFF99">
 @hamsterrrwonjin on Twitter
 </td>
 </tr>
</table>
</form>
</body>
</html>

Di bawah ini merupakan hasilnya.

Sekian untuk postingan kali ini, semoga postingan saya dapat membantu Anda yang membaca ini. Terimakasih sudah berkunjung^^

Wassalamu'alaikum warrahmatullahi wabarakatuh.

HAMSTER WONJIN

Selasa, 13 Agustus 2019

Praktikum 7 : Multimedia Pada HTML

Tidak ada komentar:

Posting Komentar