Selamat Datang

Memutar Video Di Website Dengan HTML5 – FLV | MP4 | WMV

Memutar video di halaman website adalah bahasan kita kali ini, dimana kita akan mencoba memutar file dengan format flv, mp4, wmv, dan lainnya di halaman website dengan bantuan html5 dan plugin javascript.

Memutar video di website kadang memang menyulitkan, namun jika sudah mengetahui plugin yang benar dan powerful maka semua akan terasa lebih mudah.

Watching

Image By: waferboard

Pada kesempatan kali ini tutorial-webdesign.com akan mencoba memutar video dengan video.js, Video.js adalah sebuah javascript dan css yang dapat memudahkan pekerjaan kita, dan sudah support html5, bahkan saat ini video.js disebuat sebagai “HTML5 Video Player” walau bisa juga kita sebut “Flash video player”.

Caranya menggunakannya cukup mudah, coba ikuti langkah-langkah berikut ini.

HTML

Buat file html dengan nama index.html, lalu diantara head dan /head tuliskan script berikut

	<link rel="stylesheet" href="video-js.css">
	<script src="video.js"></script>
	<link rel="stylesheet" href="style.css">

Yang perlu dilihat disitu adalah dua buat file yaitu video-js.css dan video.js, dimana kedua file tersebut diperoleh dari website resmi  video.js atau halaman github video.js

Untuk bagian body cukup tuliskan script berikut

		<video id="video1" class="video-js vjs-default-skin" width="480" height="320"
			poster="http://www.tutorial-webdesign.com/wp-content/themes/nurumah/img/logo-bg.png"
			data-setup='{"controls" : true, "autoplay" : false, "preload" : "auto"}'>

			<source src="funny-video.flv" type="video/x-flv">
			<source src="funny-video.mp4" type='video/mp4'>
		</video>

Dapat dilihat script diatas menggunakan tag html5 yaitu video dan ditambahkan dengan data-setup dari video.js.

Anda dapat mengganti bagian berikut:

  • poster: (gambar yang muncul sebelum video di mainkan).
  • Autoplay: true/false.
  • src: untuk PATH lokasi dan nama file.

Agar lebih mudah kita juga dapat menggenerate kode yang diinginkan.


DEMO | DOWNLOAD CODE

Sekian tutorial singkat kali ini, salam web design & development Indonesia

Image By: waferboard





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

16 thoughts on “Memutar Video Di Website Dengan HTML5 – FLV | MP4 | WMV

  1. […] dua file itu digunakan untuk memutar file video dihalaman website, baca artikel sebelumnya tentang Memutar Video Dengan HTML5  jika anda […]

  2. adie says:

    mantapsssss …..oea gan ane mau tanya kalau videonya di dari database gimana gan????? kasih donk tutorialnya….makasih gan sebelumnya di tunggu…

  3. tady says:

    Menarik tutorial yang sedang dibahas, kebetulan saya juga lagi belajar mengenai itu.
    bisa dijelaskan lebih lengkap dari pembuatan index, review video tsb terus file javascript yang di include-kan apa saja, sebelumnya terima kasih banyak

    • Itu kan sudah dijelaskan dengan cukup lengkap, silahkan di download saja script nya kalau masih bingung, dan coba di baca script nya, mudah-mudahan nanti akan mengerti :)

  4. affan says:

    makasih kak tutorial nya

  5. Mau tanya nih, bagaimana caranya jika kita ingin membuat beberapa thumbnail video streaming yang source videonya ambil dari streaming, misal video src=h*tp://ipAdress1:portNumber, h*tp://ipAdress2:portNumber, h*tp://ipAdress3:portNumber dst

  6. Mas kalau versi MKV bisa gak ya ?

  7. ichsan says:

    script yang diatas kan cuma 1 video..
    gimana caranya supaya bisa memutar video secara bersamaan??
    karena sy coba pake script di atas tidak bisa..
    mohon bantuannya..

  8. kresna says:

    mau tanya
    saya sudah berhasil untuk upload video flv, tapi kok nggak bisa play ya…
    malah muncul icon buffering…
    itu kenapa yah ?

  9. hendri says:

    saya masih pening ni cara membuat website khusus untuk MP3… bisa tolong dibantu mas… dan Juga apa saya harus perlu membuat server sendiri untuk file2 saya… ?

    • Kalau bisa ya buat server sendiri agar file nya bisa leluasa untuk di manage. Kalau di server orang lain kalo server nya mati, atau terjadi data yang hilang kita akan sulit jadinya.

  10. Bitvo TV says:

    saya kebingungan buat app android yang suport php. misal saya punya tv servernya xxxx/indonesia/rcti.php,, jadi in ke mp4, mov, fly gmana ya mas solusinya ?? makasih

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development