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>

Posted in: Web