Belajar Web Programming PHP, HTML, MySQL dan Tutorial

Coding Memasukan Video Dengan HTML5 dan PHP

Bahasa pemrograman HTML berkembang dengan sangat pesat. Dengan HTML5 kita dapat memasukan video dan memutarnya dengan mudah. Dengan beberapa baris kode video dengan format populer seperti .mp4 dapat diputar dengan baik. HTML5 menjadi solusi untuk menampilkan web dengan audio video yang lebih ringan dan stabil.

Format video yang telah didukung juga cukup banyak. Namun format .mp4 masih cukup populer untuk digunakan. Kode untuk memutar video dapat menggunakan sintaks dibawah ini:

<video width="320" height="240" controls>
<source src="contoh-video.mp4" type="video/mp4">
Browser tidak mendukung
</video>

Namun ada kemungkinan beberapa browser mendukung format yang berbeda-beda. Dalam kode diatas terdapat beberapa atribut tambahan dari tag <video> yaitu:

controls berfungsi menampilkan navigasi control seperti tombol play, pause dan pengaturan lain.

autoplay berfungsi pemutar otomatis apabila file telah siap

loopberfungsi sebagai pemutar berulang-ulang apabila video telah selesai

muted berfungsi untuk melakukan mute pada audio

src berfungsi sebagai sumber URL video yang akan dimainkan. Apabila telah menggunakan tag <source> maka atribut src tidak diperlukan.

width & height berfungsi untuk mengatur lebar dan tinggi video yang akan ditampilkan

poster berfungsi sebagai sumber URL gambar thumbnail sebelum video di play atau pada saat sedang buffer.

Dengan pengaturan sederhana kita dapat membuat sebuah aplikasi pemutar video berbasis web yang cukup ringan dan mudah untuk dilakukan. Fungsi pemrograman PHP disini adalah untuk membuat tampilan aplikasi menjadi lebih dinamis. Misalnya aplikasi sederhana dalam menampilkan list beberapa video dimana user dapat memilih video mana yang ingin diputar dahulu.

Berikut adalah soucecode bagaimana membuat aplikasi pemutar video sederhana tersebut. contoh video diambil dari Youtube.

<?php
error_reporting(0);
?>
<b>Video Advertisement</b>
<hr>
<a href='?'>Home</a>
<hr>
<ul>
<li><a href='?id=01'>Iklan Mobil</a></li>
<li><a href='?id=02'>Iklan Mobil</a></li>
</ul>
<hr>
<?php
$id=trim($_GET['id']);
if(!empty($id))
{
$video = "iklan".$id.".mp4";
?>
<video width="480" height="320" controls>
<source src="<?php echo $video;?>" type="video/mp4">
Browser tidak mendukung
</video>
<?php
} else { echo "Video belum dipilih"; }
?>
?>
Selamat mencoba ya hasilnya dapat dilihat dibawah ini:
Hasil:

File video dan php

Tampilan aplikasi




Labels: Belajar, Coding, HTML5, PHP

Terima kasih telah membaca Coding Memasukan Video Dengan HTML5 dan PHP. Bila bermanfaat boleh di share yah :)

1 Comment for "Coding Memasukan Video Dengan HTML5 dan PHP"

source di atas menghasilkan 3 vidio dalam 1 page, sedang yg di inginkan dalam 1 page ada3 vidio yang play secara bergantian

Back To Top