Cara menambah Video dalam Web Menggunakan HTML Sederhana 2023 - Tarunajati News Media Informasi, Teknologi, Bisnis, Tutorial, Pendidikan dan SEO

Jika pada tutorial kemarin, kita sudah belajar cara merancang web berbasis HTML. masih belum cukup, di artikel sebelumnya kita juga pernah menambahkan gambar di dalam web. Karena sekarang ini konten di dalam web tidak hanya dalam bentuk teks ataupun gambar saja melainkan kita juga bisa menambahkan audio dan video.

Nah, pada tutorial yang akan kita bahas ini. Kita akan belajar cara menambahkan video di HTML secara sederhana.

Daftar Isi

Cara Menambahkan Video di HTML

HTML saat ini punya tag baru untuk membuat media player, yang bernama tag <video>.

Jika tag video di buka pada browser yang tidak mendukung fitur tersebut, maka teks browser tidak mendukung tag video akan ditampilkan.

Tapi, kalau mendukung. videonya yang akan ditampilkan seperti gambar berikut ini.

untuk kode htmlnya anda bisa melihat di bawah ini

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Contoh Video di HTML</title>
</head>
<body>
  <h1>Contoh Menambah Video dalam HTML</h1>
  <video controls>
    <source src="C:\Users\TARUNA PUSAT\Videos\AAPJ VIDEO\kursi.mp4" type="video/mp4" />
    your browser does not support the video tag. 
  </video>
</body>
</html>

Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan. Seperti langkah yang kemarin perhatikan saat kalian menambah letak video dalam folder sesuaikan untuk menambah file HTML.

Pada contoh di atas, kita menuliskan secara langsung nama video yang akan ditampilkan. Ini karena videonya berada dalam satu folder dengan file HTML.

Format Video yang Didukung

Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format video yang didukung:

Format FILE	Media Type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

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

Atribut untuk Video

Tag <video> punya beberapa atribut yang bisa diberikan:

Nama Atribut	Nilai	Fungsi
`autoplay`	`true`/`false`	Agar video diputar 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’

Jika atribut bernilai true, maka ia boleh ditulis namanya saja.

Contoh:

<video loop="true">
<source src="video.mp4" />
</video>

Penjelasan Kode HTML

1. Tag HTML

Tag <html> berfungsi untuk mendefinisikan bahwa file dokumen tersebut merupakan html.

2. Tag Head

Tag <head> merupakan kepala dari dokumen html tempat meletakkan atau mendefinisikan file CSS atau JavaScript.

3. Kode Video src

Tag <video > digunakan untuk menyisipkan video ke dalam dokumen html, jangan lupa perhatikan letak pennyimpanan file tersebut dan format yang kalian gunakan anda juga bisa mengatur ukuran video di dalam HTML dengan menambahkan kode berikut =”controls” style=”display:block; margin:0 auto;
width:780px; height:780;”