Mengatur Objek Video HTML Menggunakan Video Object DOM

Properti Video object DOM pada HTML merupakan properti yang digunakan untuk merepresentasikan elemen <video> pada dokumen HTML. Elemen video dapat diakses dengan menggunakan method getElementById().

Properti Video Object DOM

Sebelum memahami lebih dalam materi tentang Mengatur Objek Video HTML Menggunakan Video Object DOM, terlebih dahulu pelajari materi tentang: Mengatur Objek Suara HTML Menggunakan Audio Object DOM [klik], Membersihkan Penyimpanan Lokal HTML Local Storage Clear DOM [klik], dan Menghapus Item Penyimpanan HTML Menggunakan removeItem Storage DOM [klik].

Sintak:

• Untuk mengakses object video: document.getElementById("videoId");
• Untuk menciptakan object video: document.createElement("VIDEO");

Property Values:

• audioTracks: digunakan untuk mengembalikan nilai object AudioTrackList yang merepresentasikan nilai track audio yang tersedia saat ini.
• autoplay: digunakan untuk mengatur atau mengembalikan nilai video apakah dapat dimulai secara langsung ketika video tersebut sudah tersedia atau tidak.
• buffered: digunakan untuk mengembalikan nilai object TimeRanges yang merepresentasikan bagian nilai buffer dari sebuah video.
• controller: digunakan untuk mengembalikan nilai object MediaController yang merepresentasikan media kontrol saat ini dari sebuah video.
• controls: digunakan untuk mengatur atau mengembalikan nilai kontrol video untuk ditampilkan atau tidak.
• crossOrigin: digunakan untuk mengatur atau mengembalikan nilai pengaturan CORS dari sebuah video.
• currentSrc: digunakan untuk mengembalikan nilai URL dari video saat ini.
• currentTime: digunakan untuk mengatur atau mengembalikan nilai posisi playback saat ini dari suatu video.
• defaultMuted: digunakan untuk mengatur atau mengembalikan nilai suatu video apakah harus di-muted atau tidak secara default.
• defaultPlaybackRate: digunakan untuk mengatur atau mengembalikan nilai kecepatan playback dari suatu video yang sedang digunakan saat ini.
• duration: digunakan untuk mengembalikan nilai length dari sebuah video.
• ended: digunakan untuk mengembalikan nilai playback ketika video sudah selesai dijalankan.
• error: digunakan untuk mengembalikan nilai object MediaError yang merepresentasikan state error dari sebuah video.
• height: digunakan untuk mengatur atau mengembalikan nilai atribut height dari sebuah video.
• loop: digunakan untuk mengatur atau mengembalikan nilai video apakah harus dimainkan lain atau tidak setiap kali video yang dimainkan tersebut telah selesai diputar.
• mediagroup/td: digunakan untuk mengatur atau mengembalikan nilai nama dari kelompok media dari video.
• muted: digunakan untuk mengatur atau mengembalikan nilai suara dari video yang sedang dimainkan apakah harus dimatikan atau tidak.
• networkState: digunakan untuk mengembalikan nilai network state dari sebuah video.
• paused: digunakan untuk mengembalikan nilai sebuah video apakah akan di-pause atau tidak.
• playbackRate: digunakan untuk mengatur atau mengembalikan nilai kecepatan playback video.
• played: digunakan untuk mengembalikan sebuah object TimeRanges yang merepresentasikan bagian dari sebuah video.
• poster: digunakan untuk mengatur atau mengembalikan nilai dari atribut poster dari sebuah video.
• preload: digunakan untuk mengatur atau mengembalikan nilai atribut preload dari sebuah video.
• readyState: digunakan untuk mengembalikan nilai ready state dari sebuah video.
• seekable: digunakan untuk mengambalikan nilai object TimeRanges yang merepresentasikan bagian seekable dari sebuah video.
• seeking: digunakan untuk mengembalikan nilai seeking dari saat ini dari user pada sebuah video.
• src: digunakan untuk mengatur atau mengembalikan nilai atribut src dari sebuah video.
• startDate: digunakan untuk mengatur atau mengembalikan nilai atribut src dari sebuah video.
• textTracks: digunakan untuk mengembalikan nilai object TextTrackList yang merepresentasikan track teks yang sedang tersedia saat ini.
• videoTracks: digunakan untuk mengembalikan nilai object VideoTrackList yang merepresentasikan track video yang tersedia saat ini.
• volume: digunakan untuk mengatur atau mengembalikan nilai volume audio dari sebuah video.
• width: digunakan untuk mengatur atau mengembalikan nilai dari atribut width dari sebuah video.

Baca Juga:

• Mengetahui Tipe Video pada HTML menggunakan canPlayType DOM [klik]
• Memutar Video HTML Menggunakan Load DOM [klik]
• Memainkan Video pada HTML Menggunakan Play VIDEO DOM [klik]
• Menghentikan Video HTML Menggunakan Pause VIDEO DOM [klik]

Video Object Methods:

• pause: digunakan untuk melakukan pause dari video yang sedang di-play saat ini.
• load: digunakan untuk melakukan reload elemen video.
• play: digunakan untuk memulai memainkan sebuah video.
• addTextTrack: digunakan untuk menambah track teks baru dari sebuah video.
• canPlayType: digunakan untuk memeriksa apakah browser dapat memainkan tipe video tertentu atau tidak.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Input Video Object 

DOM pada HTML

</title>

</head>

 

<body>

<center>

 

<h1 

style="color:green;">

Blog Elfan

</h1>

 

<h2>

Properti Video Object DOM

</h2>

 

<video 

id="dom1"

width="320"

height="240"

controls>

<source 

src=

"project.mp4"

type="video/mp4">

</video>

 

<br>

 

<button 

type="button" 

onclick="Bon1s()">

Click

</button>

 

<p id="rk"></p>

 

<script>

function Bon1s() 

{

// Mendapatkan nilai durasi 

// dari video

var r =

document.getElementById(

"dom1").duration;

 

document.getElementById(

"rk").innerHTML = r;

}

</script>

 

</center>

</body>

 

</html>

Output:

Blog Elfan

Properti Video Object DOM

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Input Video Object 

DOM pada HTML

</title>

</head>

 

<body>

<center>

 

<h1 

style="color:green;">

Blog Elfan

</h1>

 

<h2>

DOM Video Object

</h2>

 

<video 

id="bon2"

width="320"

height="240"

controls>

<source 

src="project.mp4"

type="video/mp4">

</video>

 

<br>

 

<button 

type="button" 

onclick="mkk2s()">

Click

</button>

 

<p id="rk"></p>

 

<script>

function mkk2s() 

{

// Mengembalikan nilai lebar

var r =

document.getElementById(

"bon2").width;

 

document.getElementById(

"rk").innerHTML = r;

}

</script>

 

</center>

 

</body>

 

</html>

Output:

Blog Elfan

DOM Video Object

Referensi Tambahan:

• Membaca Track Audio HTML Menggunakan audioTracks DOM [klik]
• Memutar Audio Otomatis pada HTML Menggunakan Autoplay DOM [klik]
• Mendapatkan Waktu Jeda HTML Menggunakan Buffered Audio DOM [klik]
• Mengatur Suara HTML Menggunakan Audio Kontrol DOM [klik]
• Mendapatkan URL Audio HTML Menggunakan currentSrc DOM [klik]
• Mengatur Waktu Audio Saat Ini pada HTML Menggunakan currentTime DOM [klik]
• Membisukan Suara Otomatis pada HTML Menggunakan Audio defaultMuted DOM [klik]

Artikel ini didedikasikan kepada: Riko Akbar Khoirulhakim, Rimmatul Khasanah, Risma Aulia Atiqa, Rizaldy Arji Pangestu, dan Rizqy Cahya Putra Laksana.