Belajar HTML Part 13: Cara Menambahkan video di HTML (tag video)
Halo Kawan-kawan
Apakah kawan-kawan sedang mencari cara memutar video online hanya dengan html ?,
Untuk memutar video pada halaman HTML, kita dapat menggunakan tag video.
Membuat Pemutar Video Dengan HTML
Sebelum membuat codenya masukan dahulu file video sesuai tata cara yang telah dibahas mengenai perbedaan antara alamat relatif dan alamat absolute pada Belajar HTML: Cara Membuat link di HTML.
Langsung saja, Kita buka file Notepat++ dan ketikan Kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Pemutar video Dengan HTML</title>
</head>
<body>
<h1>
Membuat Pemutar video Dengan HTML
</h1>
<h2>
Video ini menggunakan atribut src
</h2>
<video width="400px" height="350px" controls>
<source src="Belajar HTML Part 1 Pengertian HTML.mp4">
</video>
<h2>
Video ini menggunakan atribut src dan type
</h2>
<video width="400px" height="350px" controls>
<source src="Belajar HTML Part 1 Pengertian HTML.mp4" type="video/mp4">
</video>
<h2>
Video ini mengakses file di folder berbeda
</h2>
<video width="400px" height="350px" controls>
<source src="Video/Belajar HTML Part 2 Mengenal Fungsi Web Browser.mp4" type="video/mp4" >
</video>
</body>
</html>
Hasil Code
Seperti yang dapat dilihat, untuk menampilkan gambar video sekurang-kurangnya harus mengandung tag dan atribut berikut:
- -tag video: merupakan kode HTML5 yang member tanda kode yang akan dibuka adalah video
- -atribut width dan height: untuk mengatur besaran tampilan video yang diinginkan (width untuk panjang dan height untuk lebar)
- -control: berfungsi untuk menampilkan tombol start, pause, dan lain-lain
- -src: berfungsi untuk mencari video yang akan diputar pada halaman HTML
- -type: mengidentifikasi type dari video yang akan ditampilkan
Untuk menampilkan data, baik itu berasal dari database atau dari sumber lain, akan lebih rapi jika menggunakan tabel. Dalam tutorial belajar HTML selanjutnya, kita akan membahas tentang Cara Membuat tabel di HTML menggunakan tag table.
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2