Lompat ke konten Lompat ke sidebar Lompat ke footer

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, Memutar Otomatis Video HTML Menggunakan Properti Autoplay DOM, dan Mendapatkan Nilai Audio HTML Menggunakan audioTracks DOM.

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.

<!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>

Artikel ini didedikasikan kepada: Ulfa Trihandayani, Vera Yolanda, Wahyuni Dwi Pertiwi, Wanadya Ayu Duta Kinasih, dan Wardani Trihandini.

5 komentar untuk "Menampilkan Kontrol Video HTML Menggunakan Controls DOM"

  1. Jenis browser seperti apa yang dapat digunakan oleh general Z untuk mengaktifkan properti Video Controls DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan oleh general Z untuk mengaktifkan properti Video Controls DOM pada HTML:
      001. Google Chrome
      002. Internet Explorer
      003. Firefox
      004. Opera
      005. Apple Safari

      Hapus
  2. Apa yang dimaksud dengan properti controls DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti controls DOM pada HTML merupakan properti yang digunakan untuk mengatur atau menampilkan apakah suatu browser harus menampilkan kontrol media standar atau tidak.

      Hapus
    2. Properti kontrol DOM pada HTML berfungsi untuk mengatur atau menampilkan apakah suatu media berupa video atau audio harus menampilkan kontrol video standar.

      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 -