Cara Menampilkan Video di HTML

Selamat bergabung di kategori Belajar Web. Disini saya akan menjelaskan se detail-detailnya tentang cara menampilkan sebuah video ke dalam web kalian. Oke gan gak perlu panjang lebar lagi, silahkan ikuti cara-cara dengan baik.


Cara Menampilkan Video di Web HTML
1. Silahkan buka kode editor kalian, bisa itu Sublime Text atau Dreamweaver atau yang lainnya (sesuka kalian).
2. Silahkan masukan kode dibawah di dalam file html kalian.
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Keterangan:

Silahkan ganti teks yang bercetak miring menjadi nama file video anda.
Untuk kode yang di baris 3 biarkan formatnya (.ogg), hanya tinggal ganti "movie" menjadi nama video anda.
3. Maka video anda akan bisa diputar dalam web html anda.

Cara Menampilkan Video Autoplay di Web HTML
 1. Silahkan buka kode editor kalian, bisa itu Sublime Text atau Dreamweaver atau yang lainnya (sesuka kalian).
2. Silahkan masukan kode dibawah di dalam file html kalian.
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Dengan hanya menambahkan teks (autoplay) di baris pertama, video anda akan berjalan setelah loading web selesai dan akan langsung tampil.

Cara Mengatur Ukuran Video dalam Web HTML
<video controls autoplay width="640px">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Keterangan:
- Untuk yang berwarna biru muda, itu adalah ukuran video yang akan ditampilkan. Ukuran dalam bentuk px (pixel). Atau bisa juga tidak dituliskan seperti "640" saja. Namun disarankan untuk menuliskan "px" dibelakang angka untuk menunjukan besaran ukuran.
- Untuk ukuran yang ingin menyesuaikan, silahkan isi dengan angka "100%". Dengan begitu video yang tampil akan tampil secara full. Bisa juga untuk "50%", itu akan selalu setengah dari halaman web anda meskipun web browser di perkecil. 

Mudah kan? Oke, silahkan dicoba.

Buat kalian yang baru pertama belajar web, silahkan pelajari coding dibawah untuk menampilkan video.
<html>
<head>
<title>Belajar Video</title>
</head>
<body>
           <video controls autoplay>
           <source src="movie.mp4" type="video/mp4">
           <source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>

Silahkan dicoba copy semua coding diatas, dan lihatlah hasilnya. Dan jangan lupa letakan video anda di satu folder dengan file html anda. Perhatikan juga nama file video anda, untuk pembelajaran rubah nama video anda menjadi "movie" seperti di codingan diatas.

Gimana? Masih bingung?
Ditunggu komentarnya ya gan!

0 Comments