Lompat ke konten Lompat ke sidebar Lompat ke footer

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 [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:

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


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

5 komentar untuk "Mengatur Objek Video HTML Menggunakan Video Object DOM"

  1. Jenis browser apa saja yang dapat digunakan pengembang untuk mengaktifkan properti object video DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti object video DOM pada HTML:
      11. Google Chrome
      22. Edge
      33. Mozilla Firefox
      44.Opera
      55. Safari

      Hapus
  2. Apa yang dimaksud dengan elemen HTML Video?

    BalasHapus
    Balasan
    1. Elemen HTML VIDEO merupakan elemen yang dapat digunakan untuk menyematkan pemutar media video yang mendukung file video ke dalam dokumen HTML pada browser.

      Hapus
    2. Elemen Video HTML merupakan elemen yang digunakan untuk menyematkan konten video dalam suatu dokumen, seperti klip video atau stream video lainnya.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -