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.

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

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

Mengatur objek video menggunakan objek model dokumen pemrograman adalah salah satu cara yang memungkinkan pengembang untuk memberikan kontrol penuh terhadap pemutaran video dalam aplikasi berbasis web. Video sering kali digunakan dalam berbagai situs web untuk memberikan pengalaman yang lebih kaya dan menarik bagi pengguna. Namun, untuk memanfaatkan video secara maksimal, penting untuk memahami cara mengendalikan pemutaran video tersebut, mengatur elemen-elemen terkait, serta melakukan manipulasi sesuai dengan kebutuhan. Pengaturan ini dapat dilakukan dengan menggunakan objek video dalam model dokumen pemrograman, yang memberikan antarmuka untuk mengontrol berbagai aspek dari elemen video.

Model dokumen pemrograman adalah suatu cara untuk mengakses dan memanipulasi elemen-elemen yang ada pada halaman web. Video adalah salah satu elemen yang bisa diakses dan dikendalikan menggunakan model dokumen pemrograman. Elemen video pada umumnya memiliki beberapa atribut dan metode yang dapat digunakan untuk memodifikasi cara video tersebut ditampilkan dan diputar. Beberapa atribut yang paling sering digunakan mencakup sumber video, kontrol pemutaran, volume, dan pengaturan lainnya yang memungkinkan interaksi lebih lanjut dengan konten video.

Salah satu aspek penting dalam pengaturan objek video adalah pengaturan sumber video. Pada umumnya, video dapat diambil dari berbagai sumber seperti file lokal, file yang diambil melalui jaringan, atau melalui layanan penyedia konten berbasis internet. Pengguna dapat mengganti atau mengatur ulang sumber video yang akan diputar. Proses ini dapat dilakukan dengan memanipulasi atribut sumber dari objek video tersebut. Selain itu, objek video juga memiliki kemampuan untuk menangani berbagai format video, yang memungkinkan fleksibilitas dalam pemutaran berbagai jenis konten video yang dapat berfungsi di berbagai perangkat atau platform.

Pemutaran video sering kali disertai dengan kontrol, seperti tombol putar, jeda, atau atur volume. Fitur-fitur ini biasanya terintegrasi dengan elemen video, yang memungkinkan pengguna untuk mengontrol pengalaman pemutaran dengan lebih mudah. Dalam beberapa kasus, pengembang mungkin ingin membuat kontrol video kustom, yang memberi lebih banyak opsi atau fitur bagi pengguna. Sebagai contoh, pengembang dapat menambahkan tombol untuk mempercepat atau memperlambat pemutaran video, atau menambahkan kontrol lain seperti pengaturan kecerahan dan kontras.

Volume suara video adalah bagian penting dari pengalaman menonton. Pengaturan volume dapat diubah dengan menggunakan objek model dokumen pemrograman yang memungkinkan pengguna untuk menyesuaikan level suara yang diinginkan. Tentu saja, pengaturan volume tidak hanya sebatas pada memperbesar atau mengecilkan suara, tetapi juga dapat mencakup kontrol mute untuk menghentikan suara sepenuhnya. Dengan menggunakan objek video, pengembang dapat membuat kontrol volume yang lebih intuitif atau bahkan menyembunyikan kontrol default yang disediakan oleh elemen video itu sendiri.

Selain itu, pengaturan kualitas video juga menjadi hal yang perlu diperhatikan. Banyak platform penyedia video menawarkan berbagai kualitas video yang dapat dipilih sesuai dengan kecepatan internet atau perangkat yang digunakan. Melalui pengaturan objek video, kualitas video ini dapat diubah secara dinamis. Hal ini penting untuk memastikan bahwa video tetap berjalan lancar meskipun dengan koneksi yang lebih lambat atau perangkat dengan spesifikasi yang lebih rendah.

Video juga sering kali dilengkapi dengan fitur untuk mendukung pemutaran otomatis, baik saat halaman pertama kali dimuat atau setelah pemutaran video lainnya selesai. Fitur pemutaran otomatis ini dapat dikendalikan melalui atribut objek video, yang memungkinkan video diputar tanpa interaksi pengguna. Tentu saja, fitur ini bisa diatur agar hanya aktif dalam kondisi tertentu atau setelah video tertentu selesai diputar. Pengaturan seperti ini memberi kontrol penuh bagi pengembang untuk mengatur pengalaman pengguna saat menonton video.

Kontrol pemutaran juga sangat penting dalam beberapa aplikasi web, terutama yang berhubungan dengan pelatihan atau pembelajaran. Beberapa pengembang memilih untuk menambahkan tombol untuk melompati bagian video tertentu, seperti tombol untuk melompati intro atau bagian yang sudah diketahui pengguna. Tombol-tombol ini biasanya terintegrasi dengan waktu video, yang memungkinkan pengguna untuk melompat ke titik tertentu dalam video tanpa harus menunggu proses pemutaran secara keseluruhan.

Aspek penting lainnya adalah pengaturan waktu pemutaran video. Objek video menyediakan beberapa metode untuk mengetahui durasi video serta posisi pemutaran saat ini. Ini memungkinkan pengguna untuk memulai video pada posisi tertentu atau mengetahui berapa lama video telah diputar. Durasi video bisa digunakan untuk berbagai tujuan, seperti menampilkan waktu yang tersisa atau menambahkan elemen interaktif yang terkait dengan waktu.

Fitur lainnya yang dapat diatur adalah pengaturan loop pada video. Pengaturan ini memungkinkan video untuk diputar berulang kali tanpa perlu intervensi pengguna. Ini sangat berguna untuk situs web atau aplikasi yang memanfaatkan video sebagai elemen pengisi latar atau untuk tampilan produk yang ingin terus diputar selama pengguna berada di halaman tertentu.

Pengaturan pemutaran video juga mencakup kemampuan untuk menangani kesalahan atau gangguan yang terjadi selama pemutaran. Misalnya, jika video gagal dimuat atau tidak dapat diputar karena masalah format atau koneksi, pengembang dapat mengonfigurasi objek video untuk menampilkan pesan kesalahan yang sesuai. Ini memberikan pengalaman pengguna yang lebih baik, dengan memberi tahu pengguna tentang masalah yang terjadi dan langkah-langkah yang dapat diambil untuk memperbaikinya.

Sebagai tambahan, objek video juga memungkinkan pengaturan subtitle atau teks terjemahan pada video. Fitur ini memungkinkan video untuk menampilkan teks secara bersamaan dengan pemutaran, yang sangat berguna terutama pada video yang memuat percakapan atau bahasa asing. Pengembang dapat menyisipkan subtitle sesuai dengan waktu yang tepat dalam video, atau bahkan mengizinkan pengguna untuk memilih bahasa subtitle yang diinginkan.

Video juga dapat dimanfaatkan dalam aplikasi interaktif yang memerlukan kontrol lebih lanjut. Sebagai contoh, dalam aplikasi permainan atau pelatihan, objek video dapat dikendalikan agar berhenti pada titik tertentu untuk memberikan instruksi atau memilih jalur cerita yang berbeda. Hal ini memperlihatkan betapa pentingnya pemahaman tentang bagaimana mengatur objek video dengan benar, agar aplikasi atau situs web dapat memberikan pengalaman pengguna yang sesuai dengan kebutuhan dan harapan pengguna.

Secara keseluruhan, objek video dalam model dokumen pemrograman memberikan kemampuan yang sangat luas dalam mengatur dan mengelola elemen video pada halaman web. Dengan menguasai berbagai metode dan atribut yang tersedia, pengembang dapat menciptakan pengalaman pemutaran video yang lebih dinamis, menarik, dan fungsional. Kemampuan untuk mengontrol berbagai aspek video, mulai dari sumber hingga pengaturan kualitas, volume, kontrol waktu, dan interaktivitas, memungkinkan pembuatan aplikasi web yang lebih beragam dan menyeluruh. Dengan pemanfaatan objek video secara maksimal, pengalaman menonton video di web dapat lebih diperhatikan dan disesuaikan dengan keinginan pengguna, memberikan nilai tambah yang lebih besar bagi aplikasi yang menggunakan fitur ini.

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 akan dibaca oleh: Riko Akbar Khoirulhakim, Rimmatul Khasanah, Risma Aulia Atiqa, Rizaldy Arji Pangestu, dan Rizqy Cahya Putra Laksana.

Location: Kota Semarang, Jawa Tengah, Indonesia

Berbagi :