Membuat DOM pada Video HTML5

By Adhi P. - Last updated: Wednesday, July 4, 2012 - Save & Share - Comments

banner438kursus Membuat DOM pada Video HTML5

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.

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

 

 

Sedangkan berikut ini adalah daftar tabel untuk video methods, properties, and events :

 

Posted in Belajar HTML5 • Tags: , Top Of Page