My Blog: Membuat Video Player dengan HTML 5

Untuk membuat video player dengan menggunakan HTML 5 tidak usah menggunakan plugin seperti jwplayer dll cukup dengan tag - tag HTML 5 saja. berikut kode script HTML 5 untuk membuat video player

<!DOCTYPE html>
<?php
if (isset($_GET['id']))
{
    $id=$_GET['id'];
}
?>
<html>
<body>
<h1 align="center">Video Player </h1>
<div id="container" align="center">
<video width="320" height="240" controls="controls" autoplay="autoplay" >

<?php
if($id==""){
    echo '<source src="videos/LARVA - Decay.mp4" type="video/mp4" />';
}
else{
    echo '<source src="videos/',$id,'" type="video/mp4" />';
}
echo 'Your browser does not support the video tag. ';
?>
</video>
</div>
<div id="list" align="center">
<h3>Daftar List Video</h3>
<a href="index.php?id=LARVA - Puding.mp4">LARVA - Puding</a>
<br>
<a href="index.php?id=LARVA_Cement.mp4">LARVA - Cement</a>
<br>
<a href="index.php?id=LARVA_Balloon.mp4">LARVA_Balloon‬</a>
<br>
<a href="index.php?id=LARVA - Decay.mp4">LARVA - Decay</a>
</div>
</body>
</html>

berilah nama file index.php. file ini diletakkan dalam webserver/xampp anda. dan berilah folder videos untuk menyimpan video yang akan ditampilkan. setelah selesai buka file di browser localhost anda

contoh screenshotnya :

3 comments:

UnknownMarch 25, 2014 at 12:09 PM
Gan , boleh minta ajarin bikin videonya ? bagi informasinya gan .. bantu @vjoy10
SaptaBagusSantosoMarch 26, 2014 at 5:28 PM
ini gan saya kasih source codenya http://www.mediafire.com/download/xhpvvfrh6afv1ct/videoplayer.zip
UnknownMay 12, 2014 at 8:24 PM
Terima kasih gan atas tutor, ini yang saya cari-cari :D

Monday, October 28, 2013

Membuat Video Player dengan HTML 5

3 comments: