HIMANIFO UNIMMA
 Menampilkan Video di HTML Web Programming 

14:00:00, 14 November 2020

Web Programming

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>

Try Here >>

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>

Try Here >>

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>

Try Here >>

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>

Try Here >>

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

Gabung Diskusi