Belajar HTML #8 : Menambahkan Video Html

Hallo temen temen, kali ini kita akan belajar menambahkan video html. Video merupakan elemen penting dari sebuah website. Dengan adanya video kita dapat memberikan pesan bukan dalam bentuk tulisan sehingga dapat di lihat oleh pengunjung website kita. Dulu awalnya sangat sulit untuk menambahkan sebuah video di dokumen html. Karena besarnya ukuran yang bisa digunakan. Pada masa iru, untuk menambahkan video di html perlu menggunakan plugin seperti flash. Teknologi ini dapat berjalan dengan baik hanya saja terdapat issue keamanan aksesibilitas, dll.

Sebelumnya buat kalian yang ingin belajar form html bisa ketulisan saya sebelumnya Belajar HTML #7 : Membuat Form Html

Sekarang sudah beda karena ada html versi 5. Kita bisa memakai element untuk menangani penambahan vide tersebut yaitu tag <video>.

Cara Menambahkan Video Html

Untuk cara penulisannya seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
  <video controls>
    <source src="assets/tutorial.mp4" type="video/webm"/>
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>
</html>

Pembahasan :

  • Atribut controls untuk untuk menampilkan pengaturan video. Seperti kontrol mulai, stop, menaikan volume dll.
  • Atribut src berguna untuk menambahkan alamat atau path dari video yang diinginkan. Hampir sama cara kerjanya dengan tag img.
  • Atribut type untuk mengatur format video
  • Elemen paragrah yang berada pada elemen <video> disebut sebagai fallback content, yang berarti paragraf ini akan ditampilkan jika browser pengguna tidak mendukung penguna elemen <video>

Disini saya membuat folder asset, oleh karena itu pemanggilanya seperti diatas jika folder yang temen temen buat berbeda maka menyesuaikan.

Selain menggunakan alamat folder kita bisa menggunakan alamt url juga gaes. Link url nya kita letakan di atribut srcnya.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
  <video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/webm"/>
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>
</html>

Format Video Yang Didukung

Perlu kita ketahui gaes tidak semua format video dapat ditampilkan di html. Nah apa aja sih format yang didukung?, berikut ini adalah format vide yang di dukung.

Format FILE Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg

Jika kamu punya video degan format yang berbeda dari ketiga format tersebut, maka kamu harus mengubahnya agar bisa ditambahkan ke HTML.

Atribut Pendukung

Selain atribut yang sudah kita gunakan tadi. Tag video memiliki beberapa atribut pendukung. List atribut video :

Nama Atribut Nilai Fungsi

autoplay true/false Agar video di putar otomatis

controls true/false Untuk mengaktifkan control video player

loop true/false Untuk memutar video terus menerus

muted true/false Untuk menonaktifkan audio

poster Image Path Untuk menentukan gambar cover dari video

width & height angka Untuk menentukan tinggi dan lebar video

playsinline true/false Untuk memutar video secara inline

Atribut yang bernilai bolean memiliki nilai default true sehingga jika memang yang kita inginkan adalah bernilai true kita cukup menuliskan saja namanya.

contoh :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
<video controls loop="true">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/webm"/>
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>
</html>

Bisa disingkat menjadi :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
<video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/webm"/>
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>
</html>

Jika atribut yang diiinginkan bernilai false, maka atribut tersebut boleh tidak ditulis atau juga boleh ditulis.

contoh :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
<video controls loop="false">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/webm"/>
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>
</html>

Menjadi :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>
<body>
  <h1>Contoh Video di HTML</h1>
<video controls>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/webm"/>
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>
</html>

Jangan Menggunakan Gif lagi

Banyak website modern saat ini menggunakan video sebagai ganti dari animasi gif. Bahkan google pun juga menyarankan untuk menggunakan video dari pada gif. Loh kenapa ?. Karena ukuran video jauh leih kecil dibandingkan gif dan juga tentunya akan mempengaruhi kecepatan download. Bagaimana menjadikan video menjadi seperti gif ?

Cara sama seperti kita menambhak video biasa hanya saja kita perlu mengaktifkan beberapa atribut yang tadi sudah kita pelajari yaitu autoplay, muted, playinline dan loop. Dan juga kita hilangkan atribut controls nya

contoh :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>

<body>
  <h1>Contoh Video di HTML</h1>
  <video autoplay loop muted playsinline>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/webm" />
    Browsermu tidak mendukung tag ini, silahkan upgrade
  </video>
</body>

</html>

Maka jika berhasil video akan menjadi nampak seperti gif. Tetapi saya menggunakan video berdurasi 10 detik ya gaes.

Menambahkan Video Youtube

Mungkin teman teman bertanya bagaimana jika video tersebut dari youtube apakah bisa menggunakan link nya ? atau bagaimana.

Caranya cukup mudah gaes. Kita tinggal mengcopy id unik dari video. Id unik ini bisa kita dapatkan dari URL video. Youtube sudah memiliki media player sendiri, yang artinya kita tidak perlu membuatnya dengan tag <video>.

Ada tag lagi untuk video youtube yaitu iframe. Sebenarnya tag ini berfungsi untuk menambahkan halaman lain dalam sebuah frame.

Langkah – langkah :

Belajar HTML #8 : Menambahkan Video Html Dunia Coding
Klik bagikan
video html
klik sematkan
video html
Salin bagian sematkan video dan paste
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Video Html</title>
</head>

<body>
  <h1>Video dari youtube</h1>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/lmRisuGYGPM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>

</html>
Belajar HTML #8 : Menambahkan Video Html Dunia Coding

Hasilnya akan menjadi seperti diatas.

Keren ya gaess, mungkin sampai sini dulu saja tutorialnya. Semangat Ngoding

Share

Ferry Coder

Seorang full stack web developer dan mahasiswa informatika di Sleman, Yogyakarta. Saat ini sedang menempuh studi di Universitas Amikom Yogyakarta jurusan informatika, konsentrasi pemrograman. Dalam dunia coding, saya fokus pada Web Development. Biasa bekerja menggunakan framework laravel(PHP) dan bootstrap, tetapi juga terbuka dengan teknologi lainya jika diperlukan. Suka bekerja sama, saling berbagi dan terbuka untuk saling berdiskusi.

You may also like...

1 Response

  1. 14/01/2022

    […] Atribut ini berfungsi untuk melooping atau mengulang ulang audio kita seperti di tag video tulisan saya sebelum ini. […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *