HIMANIFO UNIMMA
Menampilkan Video di HTML Web Programming
14:00:00, 14 November 2020
MENAMPILKAN VIDEO DI HTML
Kita membutuhkan sebuah media player untuk menampilkan video di HTML. Cara menampilkan video di HTML yaitu menggunakan tag <video>.
Cara menampilkan video sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Video di HTML</title>
</head>
<body>
<video controls="true" width="250px">
<source src="https://himanifo.my.id/assets/example/video.mp4" type="video/mp4" />
Browser tidak mendukung, silahkan diperbarui !
</video>
</body>
</html>
FORMAT VIDEO
Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang didukung:
1. video/mp4 : .mp4
2. video/webm : .webm
3. video/ogg : .ogg
ATRIBUTE VIDEO
Tag <video> punya beberapa atribut yang bisa diberikan:
1. atribute autoplay, value true/false
Agar video diputar otomatis.
2. atribute controls, value true/false
Untuk mengaktifkan control video player.
3. atribute loop, value true/false
Untuk memutar video terus menerus.
4. atribute muted, value true/false
Untuk menonaktifkan audio.
5. atribute poster, value lokasi gambar
Untuk menentukan gambar cover dari video.
6. atribute width, value angka
Untuk menentukan lebar video.
7. atribute height, value angka
Untuk menentukan tinggi video
8. atribute playsinline , value true/false
Untuk memutar video secara ‘inline’.
Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Atribute Video di HTML</title>
</head>
<body>
<video controls="true" width="250px">
<source src="https://himanifo.my.id/assets/example/video.mp4" type="video/mp4" />
</video>
</body>
</html>
SUBTITLE VIDEO
Subtitle adalah teks yang akan ditampilkan dalam video. Biasanya digunakan untuk terjemahan atau alih bahasa dari video. Subtitle di HTML dapat kita tambahkan dengan tag <track>. Tag ini memiliki atribute sebagai berikut :
1. src : menentukan jalur ke subtitle
2. kind : type subtitle
3. srclang : kode bahasa
4. label : label bahasa
Contoh menampilkan subtitle video sebagai berikut :
<!DOCTYPE html>
<html>
<head>
<title>Subtitle Video di HTML</title>
</head>
<body>
<p> Note: Jangan lupa menyalakan subtitle nya. </p>
<video controls="true" width="250px">
<source src="https://himanifo.my.id/assets/example/video.mp4" type="video/mp4" />
<track src="https://himanifo.my.id/assets/example/subtitle.vtt" kind="subtitles" srclang="id" label="Indonesia"/>
</video>
</body>
</html>
Format file subtitle untuk video di HTML adalah WebVTT (.vtt) atau Web Video Text Track. File (.vtt) ini bisa dibuat dengan teks editor. Jika kamu punya subtitle dengan format SubRip Text (.srt), kamu bisa mengubahnya menjadi (.vtt) di srt2vtt
MENAMPILKAN VIDEO DARI YOUTUBE
Tag yang kita butuhkan untuk menambahkan video dari Youtube adalah <iframe>. Tag ini sebenarnya berfungsi untuk menambahkan halaman lain dalam sebuah frame.
Cara menampilkan video dari youtube sebagai berikut :
1. Pilih video dari Youtube.
Contoh:
https://www.youtube.com/watch?v=DpF1c7xMzAc
https://www.youtube.com/watch?v=DpF1c7xMzAc&t=5s
2. Perhatihan baik-baik kedua link di atas, Kedua link tersebut sama.
3. Ubah link tersebut menjadi
https://www.youtube.com/embed/DpF1c7xMzAc
4. Kemudian buat html seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan Video Dari Youtube di HTML</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DpF1c7xMzAc"></iframe>
</body>
</html>
Alternative lain, cara menampilkan video dari Youtube sebagai berikut :
1. Pilih video dari Youtube.
Contoh:
https://www.youtube.com/watch?v=DpF1c7xMzAc
2. Bagikan video tersebut.
3. Klik sematkan atau ikon (< >).
4. Salin source code nya.
5. Paste ke text editor kalian.
Maka hasil nya sama dengan contoh di atas.
MUDAH KAN ?? SELANJUTNYA..
Membuat Form di HTML Web Programming | HIMANIFO UNIMMA →
Jika ada pertanyaan bisa gabung diskusi dibawah atau kontak langsung
Mail :
ajiwahyu12592@gmail.com
#Himanifo Unimma
#Menampilkan Video Di HTML
#Belajar Web Programming
#Himpunan Mahasiswa Jurusan Teknik Informatika