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().

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, Membersihkan Penyimpanan Lokal HTML Local Storage Clear DOM, dan Menghapus Item Penyimpanan HTML Menggunakan removeItem Storage DOM.

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
• Memutar Video HTML Menggunakan Load DOM
• Memainkan Video pada HTML Menggunakan Play VIDEO DOM
• Menghentikan Video HTML Menggunakan Pause VIDEO DOM

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
• Memutar Audio Otomatis pada HTML Menggunakan Autoplay DOM
• Mendapatkan Waktu Jeda HTML Menggunakan Buffered Audio DOM
• Mengatur Suara HTML Menggunakan Audio Kontrol DOM
• Mendapatkan URL Audio HTML Menggunakan currentSrc DOM
• Mengatur Waktu Audio Saat Ini pada HTML Menggunakan currentTime DOM
• Membisukan Suara Otomatis pada HTML Menggunakan Audio defaultMuted DOM

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

Location: Kota Semarang, Jawa Tengah, Indonesia

Berbagi :