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/>
<video width=”400px” height=”300px” controls>
<source src=”buka_video.mp4″ type=”video/mp4″>
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
Tidak harus diisi
Menentukan video agar otomatis berjalan saat web selesai dimuat/load.
Tidak harus diisi
Menentukan agar kontrol (seperti tombol play/pause, atau progressbar) tampil.
pixels (ex. 300px)
Menentukan tinggi video player
Tidak harus diisi
Menentukan agar video diulangi/dimainkan lagi secara terus menerus setelah selesai.
Tidak harus diisi
Menentukan agar video tidak bersuara
URL (ex.
Menentukan sumber file gambar yang tampil pada video player saat video tidak berjalan.
auto
metadata
none
Menentukan  bagaimana video seharusnya tampil sebelum di mainkan ketika website sudah dimuat.
URL (ex.
Menentukan sumber file video jika tidak menggunakan tag <source> didalamnya
pixels (ex. 300px)
Menentukan lebar video player
13.   <source src=”buka_video.mp4″ type=”video/mp4″>
<source src=”buka_video.webm” type=”video/webm”>
<source src=”buka_video.ogg” type=”video/ogg”>
Kode diatas digunakan untuk menampilkan video sesuai formatnya, jika saya tadi di dalam format html menggunakan video berformat mp4 maka saya menggunakan tag 
<source src=”buka_video.mp4″ type=”video/mp4″>
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

1 thought on “Cara Menampilkan Video Dengan Html”

Leave a Comment