Selasa, 27 Desember 2016

HTML : Menampilkan video di Browser



Assallamuallaikum Wr Wb
    Halo kawan , di sini saya akan melanjutkan posting apa yang telah saya pelajari , jika sebelumnya kita mempelajari cara menampilkan gambar dengan HTML, Sekarang kita akan lanjut cara mempelajari cara menampilkan video dengan HTML.


ALAT DAN BAHAN
  • PC / Laptop
  • Text Editor
  • Browser
Dalam menampilkan video dalam html menggunkan sintag
<video> ..... </video>
<source src="namavideo.formatvideo">
    Penggunaan tag <video> digunakan untuk mengatur panjang dan lebar tampilan video. didalam tag video terdapat dua atribute yaitu :
  1. Controls
  2. Autoplay
    Untuk penggunaan controls senderi berguna untuk agar video dapat di atur sesuai keinginan user, dapat di play / pause , dapat di atur volume dari video tersebut.

    Untuk penggunaan atribute autoplay berguna agar video langsung memutar secara otomatis dan pada tag atribute autoplay tidak dapat mengcontrol video.

    Di bawah ini saya beri contoh dari menampilkan video dan penggunaam kedua atribute tersebut.
Buat file dengan format html dan lihat sintag di bawah ini :
<!DOCTYPE html>
<html>
<head>
    <title>Menampilkan Video </title>
</head>
<body>
<center>
<h1>
<br><font color="red" face="raleway"> Belajar Menampilkan Video di Browser dengan HTML </font>
</h1>

<h3>
<br><font color="blue" face="Raleway"> Video Control </font>
</h3>

<br><video width="600px" height="300px" controls>
    <source src="video.MP4" type="video/mp4">
</video>

<h3>
<br><font color="blue" face="Raleway"> Video Autoplay </font>
</h3>

<br><video width="600px" height="300px" autoplay>
    <source src="video.MP4" type="video/mp4">
</video>

</center>
</body>
</html>
Setelah selesai jangan lupa letakkan video dalam satu folder dengan file html kawan kawan.

Setelah selesai, run file html di browser kawan kawan , jika tidak ada kesalahan maka akan tampil seperti gambar di bawah ini :



    Ok kawan kawan , sekian dulu postingan kali ini dari saya , apabila ada kesalahan saya mohon maaf , Sekian dan Terima Kasih





EmoticonEmoticon