Menampilkan Kontrol Video HTML Menggunakan Controls DOM
Properti Video controls merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai video apakah harus menampilkan kontrol standar atau tidak. Atribut video controls direpleksikan melalui properti video controls.
Sebelum memahami lebih dalam materi tentang Menampilkan Kontrol Video HTML Menggunakan Controls DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Waktu Jangkauan Video HTML Properti Buffered DOM [klik], Memutar Otomatis Video HTML Menggunakan Properti Autoplay DOM [klik], dan Mendapatkan Nilai Audio HTML Menggunakan audioTracks DOM [klik].
Properti video controls termasuk diantaranya adalah:
Sintak:
Property Values:
Return Values: berfungsi untuk mengembalikan nilai boolean, dimana video akan menampilkan kontrol standar jika nilai true, sebaliknya tidak akan menampilkan kontrol standar pada video jika bernilai false.
 |
| Properti Controls DOM pada HTML |
Properti video controls termasuk diantaranya adalah:
- Play
- Pause
- Volume
- Fullscreen Mode
- Seeking
- Captions/Subtitles
- Track
Sintak:
- Mengembalikan nilai properti controls: videoObject.controls
- Mengatur nilai properti controls: videoObject.controls = true | false
Property Values:
- true atau false: digunakan untuk menentukan apakah video harus menampilkan kontrol standar atau tidak.
Return Values: berfungsi untuk mengembalikan nilai boolean, dimana video akan menampilkan kontrol standar jika nilai true, sebaliknya tidak akan menampilkan kontrol standar pada video jika bernilai false.
Baca Juga:
Berikut adalah program ilustrasi dari properti video controls.
Contoh: Menampilkan kontrol standar pada file video HTML.
Contoh: Menampilkan kontrol standar pada file video HTML.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Video controls pada
HTML
</title>
<style>
h1
{
color: green;
}
h2
{
font-family: Impact;
}
body
{
text-align: center;
}
</style>
</head>
<body>
<h1>
Blog Elfan
</h1>
<h2>
Properti Video Controls
</h2>
<br>
<video
id="Test_Video"
width="360"
height="240">
<source
src="samplevideo.mp4"
type="video/mp4">
<source
src="movie.ogg"
type="video/ogg">
</video>
<p>
Mengatur kontrol video menjadi
enable, lakukan double klik
pada tombol "Enable Controls".
</p>
<button
ondblclick="My_Video()"
type="button">
Enable Controls
</button>
<p id="test"></p>
<script>
function My_Video()
{
document.getElementById(
"Test_Video").controls = true;
}
</script>
</body>
</html>
Referensi Tambahan:
- Mendapatkan Nilai Durasi Video HTML Menggunakan Properti Duration DOM [klik]
- Properti Video Ended HTML DOM beserta Fungsinya [klik]
- Memutar Ulang Video HTML Secara Otomatis Menggunakan Properti Loop DOM [klik]
- Mengatur Media Group HTML Menggunakan Video mediaGroup DOM [klik]
- Mematikan Suara Video HTML Menggunakan Properti Muted DOM [klik]
- Properti networkState DOM HTML dan Fungsinya [klik]
- Menjeda Video HTML Menggunakan Properti Paused DOM [klik]
Artikel ini didedikasikan kepada: Ulfa Trihandayani, Vera Yolanda, Wahyuni Dwi Pertiwi, Wanadya Ayu Duta Kinasih, dan Wardani Trihandini.
Jenis browser seperti apa yang dapat digunakan oleh general Z untuk mengaktifkan properti Video Controls DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan oleh general Z untuk mengaktifkan properti Video Controls DOM pada HTML:
Hapus001. Google Chrome
002. Internet Explorer
003. Firefox
004. Opera
005. Apple Safari
Apa yang dimaksud dengan properti controls DOM pada HTML?
BalasHapusProperti controls DOM pada HTML merupakan properti yang digunakan untuk mengatur atau menampilkan apakah suatu browser harus menampilkan kontrol media standar atau tidak.
HapusProperti kontrol DOM pada HTML berfungsi untuk mengatur atau menampilkan apakah suatu media berupa video atau audio harus menampilkan kontrol video standar.
Hapus