Cara Menampilkan Video Dengan Html

Assalamualaikum wr.wb

Selamat malam kawan, apakah kalian pernah menonton video di youtube atau di situs Indonesia terbaru yaitu metube?, pasti kalian menjawab pernah (bagi yang sudah pernah) dan belum (bagi yang belum) tapi yang belum nonton pasti tahu lah apa itu youtube, bahkan anak-anak pun banyak yang tahu tentang youtube. Dengan berdirinya youtube banyak orang bekerja sebagai tukang posting video menjadi para miliarder muda yang sukses dalam postingan videonya, bahkan mereka menyebutnya sebagai artis youtube. Untuk membuat situs penayang video seperti youtube kita memerlukan suatu plugin namun kali ini kita tidak akan membahas tentang plugin tersebut namun kita akan membahas tentang “menampilkan video dengan html”, sejak munculnya html versi 5 kita bisa menampilkan video tanpa repot-repot buat plugin, hanya dengan tag <video> kita sudah bisa menampilkan video di situs kita. Untuk lebih jelasnya ikut saya baca kebawah dengan judul:

Cara Menampilkan video dengan Html

Terlebih dahulu siapkan aplikasi edit text (seperti notepad, notepad++ atau sejenisnya) dan browser seperti (google chrome, opera mini, uc browser dan sejenisnya ).

Siapkan juga satu buah folder dengan nama “belajar” (tanpa tanda petik).

Dan yang harus kamu siapkan selanjutnya adalah video dengan format (mp4, webm, atau ogg) lalu ubah nama videonya menjadi buka_video.mp4 atau buka_video.webm ataupun buka_video.ogg

Buka aplikasi edit text (seperti notepad, notepad++ atau sejenisnya), lalu ketikan format html berikut:

<html>

<head><title>judul video</title></head>

<body>

<h3>INI VIDEO KARTUN MEAT BALL</h3><hr/><br/>

aplikasi tidak mendukung

</video>

</body>

</html>

Simpan ke folder “belajar” (tanpa tanda petik) dengan nama “tampil_video.html” (tanpa tanda petik)

Maka hasilnya adalah:

Kekurangan dari tag video ini terletak pada formatnya, yaitu tag ini hanya bisa menampilkan video berformat mp4, webm dan ogg. Dan untuk suport pada aplikasi browsernya adalah (lihat table dibawah ini):

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (from Opera 25)	YES	YES

Penjelasan dari format html:>

1. <html> : ini merupakan tag awal suatu format html dan harus selalu ada dalam format html

2. </html> :ini merupakan tag penutup dari suatu dokumen html

3. <head> :merupakan tag yang bisa di pasang dengan css (cascade style sheet) dan juga judul

4. </head> : merupakan tag penutup dari <head>

5. <title> merupakan tag yang berfungsi sebagai judul dari suatu dokumen html, dan tag ini selalu diapit dengan tag <head>disini tag title <head>

6. </title> : merupakan tag penutup dari <title>

7. <body> : merupakan tag yang digunakan untuk menampilkan isi dari suatu dokumen yang akan ditampilkan.

8. </body> :merupakan tag penutup dari <body>

9. <h3> :merupakan heading yang berfungsi mengubah ukuran dengan number 3, semakin besar no yang di berikan maka tulisan akan semakin kecil, tag ini ditutup dengan </h3>

10. <br/> : tag ini berfungsi untuk membuat garis baru.

11. <hr/>: merupakan tag yang berfungsi untuk membuat garis baru beserta garis bawah.

12. <video> merupakan tag yang berfungsi menampilkan video tag ini diakhiri dengan tag </video>. Dan memiliki berbagai atribut yaitu (lihat table dibawah ini):

Attribute	Value	Description
autoplay	Tidak harus diisi	Menentukan video agar otomatis berjalan saat web selesai dimuat/load.
controls	Tidak harus diisi	Menentukan agar kontrol (seperti tombol play/pause, atau progressbar) tampil.
height	pixels (ex. 300px)	Menentukan tinggi video player
loop	Tidak harus diisi	Menentukan agar video diulangi/dimainkan lagi secara terus menerus setelah selesai.
muted	Tidak harus diisi	Menentukan agar video tidak bersuara
poster	URL (ex.	Menentukan sumber file gambar yang tampil pada video player saat video tidak berjalan.
preload	auto metadata none	Menentukan bagaimana video seharusnya tampil sebelum di mainkan ketika website sudah dimuat.
src	URL (ex.	Menentukan sumber file video jika tidak menggunakan tag <source> didalamnya
width	pixels (ex. 300px)	Menentukan lebar video player

13. <source src=”buka_video.mp4″ type=”video/mp4″>

Kode diatas digunakan untuk menampilkan video sesuai formatnya, jika saya tadi di dalam format html menggunakan video berformat mp4 maka saya menggunakan tag

Mungkin sekian artikel yang dapat kita bahas, jika para pengunjung tidak ingin ketinggalan pemberitahuan artikel terbaru dari kami maka bisa masukan email anda dibawah.

Terimakasih banyak telah berkunjung dan mohon maaf atas ketidak nyamanannya.

Wassalamualaikum wr.wb

Sumber:>

http://www.syakirurohman.net/2015/04/menampilkan-video-pada-web-html5.html

http://www.w3schools.com/html/html5_video.asp

http://www.w3schools.com/tags/tag_video.asp