Membuat DOM pada Video HTML5
total read time
Pada artikel kali ini masih tentang video html5, yaitu cara membuat video/DOM menggunakan html5.
HTML5 Video juga mempunyai method, property dan event. Ada beberapa
metode untuk bermain, berhenti, dan loading, misalnya. Ada sifat
(misalnya durasi, volume, mencari) yang dapat membaca atau ditetapkan.
Ada juga peristiwa DOM yang dapat memberitahu Anda, misalnya, ketika
elemen <video> mulai bermain, pause, berakhir, dll. Oh ya, DOM
adalah DOcument Object Model. DOM adalah antar muka standar yang tidak
tergantung platform.
Contoh di bawah ini menggambarkan, dengan cara yang sederhana,
bagaimana mengatasi elemen <video>, membaca dan mengatur properti,
dan metode panggilan.
Berikut ini tampilan script yang harus di buat :
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br />
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4" />
<source src="mov_bbb.ogg" type="video/ogg" />
Your browser does not support HTML5 video.
</video>
</div>
<script type="text/javascript">
var myVideo=document.getElementById("video1");
function playPause()
{
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig()
{
myVideo.width=560;
}
function makeSmall()
{
myVideo.width=320;
}
function makeNormal()
{
myVideo.width=420;
}
</script>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
</body>
</html>
Dan tampilan pada web browser akan muncul tombol Mulai/Pause, Perbesar, Perkecil dan Normal untuk mengatur video yang kita buat dengan HTML5 tersebut.
Sedangkan berikut ini adalah daftar tabel untuk video methods, properties, and events :
