Cara menggunakan cara menampilkan video php

Masih repot menampilkan file video di halaman web? Kini tidak lagi. Kalau dulu, kita membutuhkan script video player, seperti Flow Player, atau yang lain untuk menampilkan video dan memutarnya di halaman web Anda. Namun kini dengan HTML5, Anda cukup mengupload file videonya saja ke hosting atau web server, lalu membuat tag HTML saja, dan selesai.

Wah mudah banget ya?? 🙂

So… Bagaimana bentuk tag untuk menampilkan file video ke halaman web dengan HTML5? caranya cukup mudah, cukup membuat tag HTML sebagai berikut:

<video width="..." height="..." controls>
  <source src="namafilemovie" type="mimetype">
</video>

dimana atribut ‘width‘ untuk menentukan panjang frame video playernya (dalam satuan pixel); ‘height‘ menentukan lebarnya (pixel); ‘controls‘ untuk menampilkan panel control pada frame video playernya seperti pengatur volume, full screen, seek bar dll; ‘src‘ untuk menentukan file video yang akan ditampilkan (bisa ditulis dalam bentuk URL); ‘type‘ untuk menentukan mime type dari file video tersebut.

Perhatikan contoh berikut ini ya

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video> 
</body>
</html>

Penampakan dari kode di atas pada browser adalah sbb:

NB: Jangan lupa menuliskan <!DOCTYPE html> pada bagian paling atas HTML Anda, karena kode tersebut merupakan penciri dari HTML5.

Anda dapat mengatur sendiri panjang dan lebar frame videonya, atau menghilangkan/memunculkan controls nya. Lalu format file video apa saja yang disupport HTML5? Format file video yang disupport adalah: *.mp4 (mime type: video/mp4), *.webm (mime type: video/webm), *.ogg (mime type: video/ogg).

Terkadang pula tidak semua jenis browser mensupport ketiga jenis file tersebut, misalnya browser IE dan SAFARI hanya bisa mensupport *.mp4 saja, atau OPERA hanya mensupport *.ogg dan *.webm saja. Sedangkan untuk CHROME dan Firefox mensupport ketiganya.

Penulisan tag <video> bisa juga seperti di bawah ini:

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

</body>
</html>

Apa maksud kode di atas? Maksudnya adalah memberikan alternatif format file video. Jika browser yang digunakan mensupport *.mp4, maka file ‘movie.mp4’ yang akan dijalankan. Apabila tidak support, maka yang akan dijalankan ‘movie.ogg’. Sedangkan apabila keduanya tidak disupport maka akan muncul pesan ‘Your browser does not support the video tag.’. Jika Anda membuat kode seperti di atas, maka tentu saja Anda harus mengupload file ‘movie.mp4’ dan ‘movie.ogg’ ke server web.

Dengan HTML5, kita juga bisa membuat tombol Play, Pause, Reload sendiri untuk mengatur jalannya video. Untuk melakukan hal ini, kita menggunakan javascript. Perhatikan contoh berikut ini:

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button>
<button onclick="reloadVid()" type="button">Reload Video</button> 
<br> 
<video id="video1">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<script> 
var myVideo=document.getElementById("video1"); 

function playVid()
{ 
  myVideo.play(); 
} 

function pauseVid()
{ 
  myVideo.pause(); 
} 

function reloadVid()
{ 
  myVideo.load(); 
}
</script> 

</body> 
</html>

Keterangan:

Untuk menjalankan video, cukup panggil dengan method play(), untuk mempausenya dengan method pause(), dan untuk mereload video gunakan load().
Perhatikan kode di atas, untuk tag videonya diberi id=”video1″. ID ini nanti akan digunakan untuk proses pemanggilan elemen di javascriptnya, yaitu myVideo=document.getElementById("video1")

Tampilan dari kode di atas adalah sbb:

Mudah bukan membuatnya? selamat mencoba dan semoga bermanfaat. Untuk referensi lebih lengkap, Anda bisa mempelajarinya di w3schools.com.

Bagikan artikel ini jika bermanfaat !