Script HTML5 untuk Memutar Video tanpa Plugin

Memutar video sekarang bukan hanya bisa dilakukan melalui Flash, melainkan juga bisa melalui elemen HTML5. Dengan demikian, website anda bisa lebih responsif jika dibuka dari perangkat apapun. Terutama jika berkaitan dengan bisnis di mana website responsif adalah tuntutan utamanya. Nah di sini, kita akan mengupas tuntas mengenai elemen HTML5 terbaru tersebut.

Elemen HTML5 yang dimaksud adalah elemen tag <video>. Elemen ini merupakan standar baru dalam menampilkan video di web tanpa perlu penggunaan plugin tambahan.

<video width=”320? height=”240? controls=”controls”>
<source src=”movie.mp4? type=”video/mp4?>
<source src=”movie.ogg” type=”video/ogg”>
</video>

Elemen <video> juga sudah dilengkapi dengan metode DOM, properti, dan elemen <audio>. Dengan demikian, kita juga bisa menambahkan atribut kontrol video seperti play, pause, dan volume. Berikut sejumlah atribut yang bisa diterapkan pada tag <video>:

autoplay=”autoplay” -> Memutar video secara otomatis.
controls=”controls” -> Menampilkan tombol kontrol video (play, pause, volume, fullscreen).
height=”pixels” -> Menentukan ukuran tinggi video.
loop=”loop” -> Mengulang video setiap kali selesai.
muted=”muted” -> Mematikan output suara pada video.
poster=”URL” -> Menampilkan gambar awal pada saat video belum di putar.
preload=”auto|metadata|none” -> Menentukan apakah video akan didownload bersama beban halaman.
src=”URL” -> Menempatan lokasi file video.
width=”pixels” -> Menentukan ukuran lebar video.

Tampilan control pada masing-masing browser:

kontrol video pada Firefox


kontrol video pada Chrome

Kontrol video pada Opera

Membuat atribut kontrol sendiri.


<div style=”text-align:left”>
<video id=”video_mov” width=”420″ poster=”poster.jpg”>
<source src=”movie.mp4″ type=”video/mp4″>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support HTML5 video.
</video>

<br/>
<button onclick=”playPause()”>Play/Pause</button>
<button onclick=”sizeBig()”>Big</button>
<button onclick=”sizeSmall()”>Small</button>
<button onclick=”sizeNormal()”>Normal</button>
</div>
<script>
varrsVideo=document.getElementById(“video_mov”);

function playPause()
{if (rsVideo.paused)
rsVideo.play();
else
rsVideo.pause();}

function sizeBig()
{rsVideo.width=560;}

function sizeSmall()
{rsVideo.width=320;}

function sizeNormal()
{rsVideo.width=420;}

</script>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s