Tutorial HTML: Menyajikan komponen Audio,Video, & flash

Assalamualaikum Semua

Hallo semua selamat datang kembali. Saya Muhammad Aslam atau panggil saja Mas Lam akan berbagi pengetahuan tentang cara menyajikan komponen Audio, Video, & flash di dalam html. dah tanpa banyak basa basi lagi Yu urang belajar html....

1.Menampilkan Format Audio

Nah yang pertama menampilkan format audio pada halaman web cara untuk menampilkannya adalah memakai Tag audio/<audio> nah caranya nya seperti dobawah ini

<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <audio controls>
            <source src="C:\Users\lenovo\Desktop\Belajar Web\NI audio\Nisha Labyrinth .mp3" type="audio/mpeg">Your browser does not support the audio element.
        </audio>
    </body>
</html>

controls itu untuk membuat audionya bisa dicontrols seperti bisa di pause atau dipindahkan ke menit selanjutnya, source untuk lokasi audio yang dipakai, dan jika format audio tidak mendukung pada browser maka akan muncul pesan "Your browser does not support the audio element" seperti codingan diatas

Hasilnya akan seperti ini

Hanya gambar

Bagaimana cara agar audio berjalan sendiri alias otomatis berputar cara nya adalah menambahkan <embed>

<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <center>
            <embed height="50" width="100" src="C:\Users\lenovo\Desktop\Belajar Web\NI audio\Nisha Labyrinth .mp3">
                <p>
Bila anda tidak dapat mendengar suara, maka kemungkinan browser yang anda gunakan tidak support dengan format file audionya
                </p>
<p>
atau bisa juga speaker anda sedang off :)
                </p>
</center>
</body>
</html>

2.Menampilkan Format Video
Bagaimana cara menampilkan format video? caranya sama dengan cara menampilkan format audio hanya saja yang berbeda adalah tag nya yaitu memakai tag <video> contohnya

<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
       <video width="320" height="240" controls>
           <source src="C:\Users\lenovo\Desktop\Belajar Web\NI vidio\Nisha Labyrinth.mp4" type="vidio/mp4"> 
            your browser does not support the vidio tag
       </video>
    </body>
</html>

dan hasilnya akan seperti ini:

nah codingan diatas masih belum menggunakan thumbnail untuk menggunakan nya yaitu dengan cara memakai elemen poster contohnya

<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
       <video width="320" height="240" controls>
           <source src="C:\Users\lenovo\Desktop\Belajar Web\NI vidio\Nisha Labyrinth.mp4" type="video/mp4"> 
            your browser does not support the vidio tag
       </video>
    </body>
</html>

Hasilnya

3. Menampilkan Format flash
sebenarnya mudah untuk menampilkan format flash yaitu dengan menggunakan tag <embed>
contohnya

<html>
    <head>
        <title>
            M.Aslam.S.R
        </title>
    </head>
    <body>
        <embed src="media/Strong.swf">
    </body>
</html>

hasilnya:

Kalian juga bisa menyatukan semua komponen diatas dengan combinasi tabel contohnya

<!DOCTYPE html>
<html>
    <head>
        <title>
            M.Aslam.S.R XI-RPL-1
        </title>
    </head>
    <body>
        <form id="rorml" name="forml" method="POST" action="">
            <table width="100%" height="100%" align="center" cellpadding="1" cellspacing="0" >
<tr height="23" align="center" border color="#FFFFFF" bgcolor="#FFFF00"><strong>
                    <td colspan="3"><font size="+5">Nisha Labyrinth</font></strong></td>
                </tr>
<tr hight="27" align="center" bgcolor="#FFCCCC"><font color="FF0000">
                    <td colspan="3">welcome</font></td>
                </tr>
<tr  height="200" align="center" bgcolor="#bb99ff" >
                    <td rowspan="2">
                       <img src="C:\Users\lenovo\Desktop\Belajar Web\NI gambar\Nisha Labyrinth.jpg" alt="">
                    </td>
                    <td width="500"> 
                        <p>
Lagu Nisha Labyrinth buatan ASTERIA adalah lagu untuk sebuah karakter dalam game Elsword untuk menyambut kedatangan karakter game tersebut
                        </p>
</td>
                   <td>
                       <p>
<h2>
Nisha Labyrinth - ASTERIA (korea version)</h2>
</p>
<audio controls>
                            <source src="C:\Users\lenovo\Desktop\Belajar Web\NI audio\Nisha Labyrinth .mp3">
                        </audio>
                   </td>
                </tr>
<tr  height="300" align="center" bgcolor="#bb99ff" >
                    <td>
                        <p>
This Videoclip =======>
                        </p>
</td>
                    <td>                            
                        <video width="320" height="240" controls>
                            <source src="C:\Users\lenovo\Desktop\Belajar Web\NI vidio\Nisha Labyrinth.mp4">browser anda tidak mendukung format vidio ini
                          </video>
                    </td>
                       
                    </tr>
<tr  height="23" align="center" bgcolor="#CCFF99">
                    <td colspan="3"<font color="#9966CC">yuurang.blogspot.com</font></td>
                </tr>
</table>
</form>
</body>
</html>

hasilnya:

praktikum 7

Yu urang nge-Blog

Search This Blog

Tutorial HTML: Menyajikan komponen Audio,Video, & flash

Comments

Post a Comment