Mengatur Objek Video HTML Menggunakan 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");
- 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.
- 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>
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>
Blog Elfan
DOM Video Object
- 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]
5 komentar untuk "Mengatur Objek Video HTML Menggunakan Video Object DOM"
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 -
Jenis browser apa saja yang dapat digunakan pengembang untuk mengaktifkan properti object video DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti object video DOM pada HTML:
Hapus11. Google Chrome
22. Edge
33. Mozilla Firefox
44.Opera
55. Safari
Apa yang dimaksud dengan elemen HTML Video?
BalasHapusElemen HTML VIDEO merupakan elemen yang dapat digunakan untuk menyematkan pemutar media video yang mendukung file video ke dalam dokumen HTML pada browser.
HapusElemen Video HTML merupakan elemen yang digunakan untuk menyematkan konten video dalam suatu dokumen, seperti klip video atau stream video lainnya.
Hapus