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.
0 komentar:
Posting Komentar