Cara menyisipkan video pada halaman web, menambahkan video dalam dokumen HTML, Cara mudah memasukan video dengan kode HTML
Pasti pernah memutar video dalam sebuah website atau blog yang biasa di sebut streaming, bukan? Apalagi situs pemutar video youtube sudah menjadi kebutuhan primer bagi sebagian orang.
Menyisipkan sebuah video dalam halaman web atau blog, sekarang ini sangatlah mudah. Tidak memerlukan plug-in atau kode mark-up yang rumit, cukup hanya dengan satu elemen saja.
Tapi sebelum ke penerapan mungkin masih ada yang mengganjal di hati kalian (sok tau banget dah saya). Mengapa kita harus memasang sebuah video dalam halaman web ? Jawaban mungkin akan berbeda setiap orang tapi intinya adalah untuk menyampaikan informasi, zaman sudah canggih brader, sekarang ini orang lebih tertarik memperhatikan sesuatu itu yang berbentuk visual, contohnya video.
Dalam perkembangannya HTML (HyperText Markup Language) kini sudah berada di versi 5, HTML 5 secara resmi dirilis pada tahun 2009 yang menjadi standar terbaru sebuah web saat ini. HTML5 merupakan proyek kerjasama antara W3C (World Wide Web Consurtium) dan WHATG (Web Hypertext Application Technology Group).
Sebelum kita praktikan, baiknya perhatikan video di bawah ini:
Di atas merupakan contoh implementasi dari penggunaan tag <video>, tag ini merupakan hal yang baru karena tidak terdapat dalam HTML versi sebelumnya.
Kode HTML untuk menyisipkan video:
<video> . . . </video>Nah berikut ini pengaplikasian yang lebih spesifik:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>| Atribut | Penjelasan |
| width | Mengatur lebar video |
| height | Mengatur tinggi video |
| controls | Menampilkan elemen kontrol seperti play, pause, volume, fullscreen, dll |
| source | Mendefinisikan beberapa sumber media |
Mari kita titik beratkan pada elemen "source", di atas di jelaskan bahwa source digunakan untuk mendefinisikan sumber media dalam hal ini video, lantas mengapa ada dua pendefinisian ? Sebetulnya bisa tiga hanya saya tidak tulis saja, jadi video tersebut sebetulnya sama namun ekstensinya saja yang berbeda, fungsinya untuk apa? Untuk mensiasati ketika browser tidak mendukung format video tertentu jadi kan ada format lainnya yang bisa diputar.
mp4 - MIME-type video/mp4
webm - MIME-type video/webm
ogg - MIME-type video/ogg
Menurut pengalaman saya, format video apapun bisa diputar asalkan URL nya berupa Direct Link, misalnya kalian memiliki video dengan ekstensi .mkv dan mau di tampilkan di web, iya syaratnya itu source harus berupa direct link.
Kode HTML Video di atas jika kalian mau cobain:
<video controls="" controlslist="nodownload"
data-setup="{}" height="400" id="my-video"
poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMwiIxZujFAhY1GMDlfPDoIBCtH7r1hrVtxU7bWp7FCDPHOlGzWgnJkRCKztUeC5N0V5BM9BJL0VODIVRWoEbpQKUb88hvGqjo0w0C6VnCgfi5EEuAB_l-08jrKsVH0nl05oZ1GeRlFdz/s1600/implementasi+tag+video.jpg"
preload="auto" width="100%">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"></source>
</video>Mungkin hanya sebegini saja kengkawan, cara menyisipkan video pada halaman HTML dengan menggunakan tag video HTML5, dilain kesempatan kita bahas bagaimana membuat direct link google drive sehingga bisa di duetkan dengan tag <video>.
Salam ngoding.
COMMENTS