Cara Menampilkan Video dengan HTML5

Logo HTML5     Pada beberapa tutorial sebelumnya SkripKu Dotkom pernah membahas salah satu fitur di HTML5 yaitu Cara Menampilkan Audio dengan HTML5. Nah, tutorial kali ini kita akan membahas Cara Menampilkan Video dengan HTML5.
     Seperti yang sudah dibahas di tutorial sebelumnya. Dengan menggunakan HTML5, untuk menampilkan audio/video kita membutuhkan lagi plugin tambahan seperti Flash atau semacamnya. Hampir sama dengan cara menampilkan audio, kita cukup menghafal 2 tag saja. Yaitu: <video> dan <source>. <video> untuk menunjukan bahwa kita akan menampilkan video dan <source> untuk mendefinisikan sumber/source file video-nya.
Oke, syntax paling umum-nya seperti ini gan:
Penjelasan:
  •  Tag <video>:Seperti yang dijelaskan pada pembukaan diatas, fungsi dari tag ini adalah untuk menunjukan bahwa kita akan menampilkan sebuah video dengan HTML5.
  • Atribut width="" : Untuk mengatur lebar video yang akan kita tampilkan.
  • Atribut height="" : Untuk mengatur tinggi video yang akan kita tampilkan.
  • Atribut controls : Untuk menampilkan Video Control seperti tombol Play, Pause, Volume, Full Screen, dan kontrol lainnya di video kita.
  • Tag <source>: Mendefinisakan source/sumber video yang akan kita tampilkan.
  • Atribut src="" : Untuk mengatur video yang akan ditampilkan. Silahkan isi dengan URL video kita.
  • Atribut type="" : Untuk mengatur type video yang akan ditampilkan. Untuk atribut ini kita harus menyesuaikan dengan jenis video yang kita panggi di atribut src="", silahkan lihat tabel dibawah:
Format File Nilai untuk atribut type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

Contoh Penggunaan

 

     Pada contoh kali ini kita punya sebuah direktori yang berisi 2 file yaitu: file skripku.html dan sebuah video bernama UWATERE@Bazit.mp4, isi dari skripku.html adalah sebagai berikut: Jika semua sesuai prosedur dan file skripku.html tadi kita buka di browser yang sudah mendukung HTML5 seperti Firefox, Google Chrome, dan browser lainnya maka seharusnya akan muncul video yang tadi kita panggil:
Sedangkan teks yang berada diantara <video> dan </video> akan muncul ketika browser yang kita gunakan belum mendukung fitur ini. Untuk membuktikannya, silahkan buka dengan Internet Explorer yang jadul.

Ya, mungkin sekian sekilas tutorial yang bisa saya sampaikan. Untuk referensi yang lebih lengkap, temen-temen bisa buka: W3Schools - HTML5 Video. Setelah mengetahui fitur yang satu ini, semoga web yang kita buat bisa lebih efisien karena tidak usah menggunakan Plugin Eksternal lagi. Terima kasih atas kunjungannya, mohon maaf bila masih banyak kekurangan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh..

Belajar Git: Apa itu VCS (Version Control System)

     Oke sebelum kita belajar GIT, sebaiknya kita belajar dulu apa sih 'Version Control' itu? Jika Anda merupakan seorang Freelance Programmer, Freelance Designer, Freelance Writer atau pekerjaan lainnya yang banyak berhubungan dengan file, tentu kita sudah tidak asing lagi dengan istilah 'revisi'. Jika kita hanya melakukan 1 atau 2 kali revisi mungkin hal ini tidak akan terlalu menjadi masalah, tapi bayangkan ketika terlalu sering ada perubahan misalnya karena sedang berhadapan dengan client yang bawel dan loba kahayang (banyak permintaan) sampai-sampai kita harus melakukan revisi sampai beberapa kali revisi, dalam kondisi seperti ini biasanya saya mengeluarkan jurus andalan saya yaitu memanfaatkan fitur Save As kemudian memberikan keterangan di belakangnya misal: banner_versi1.cdr, banner_revisi1.cdr, banner_revisi2.cdr, banner_bgnyajadibiru.cdr, banner_udahfix.cdr, dan embel-embel lainnya. Hal seperti diatas kita lakukan tentunya untuk nge-backup file kita, sehingga kalau suatu saat nanti ternyata revisi-nya tidak jadi dan ingin kembali ke versi sebelumnya maka kita tidak akan kerepotan mengubahnya kembali. Cara diatas (versioning dengan nama) bisa saja kita lakukan jika kita hanya mengerjakan 1 file dan kalau udah jadi nantinya tidak akan sering atau bahkan tidak akan diubah lagi. Tapi bayangkan jika kita membuat banyak file yang saling terkait satu sama lain misalnya source code website, tentunya jurus diatas cukup merepotkan dan hanya akan membuat direktori kita acak-acakan.

 

Perkenalkan, Version Control System (VCS)


     Version Control System adalah suatu sistem yang akan merekam setiap perubahan atau revisi pada sekumpulan file atau direktori, sehingga kalau kita ingin revisi kita dibatalkan atau ingin kembali ke versi sebelum-sebelumnya kita bisa melakukannya dengan gampang. Jadi sederhananya si VCS ini nantinya bisa membackup file atau direktori yang sedang kita kerjakan dari waktu ke waktu, sistem kerjanya mirip Restore Point di Windows 7.
     Walaupun saat ini Version Control System ini lebih populer di kalangan Programmer atau Web Designer, tapi sebetulnya Version Control System bisa kita pakai di pekerjaan lain yang akan banyak berurusan dengan file-file di komputer. Jika kita sering menulis cerpen di komputer, kita bisa memanfaatkan VCS agar setiap perubahan jalan cerita dari cerpen yang kita buat bisa terekam dan bisa dilihat kembali suatu saat nanti. Begitu pula jika kita seorang Graphic Designer kita juga bisa membuat banyak versi dari design yang sama.

Kenapa harus Version Control System?

 

     Sebenernya enggak harus juga sih, biar kekinian aja. Mau pake atau enggak sebetulnya kembali lagi ke dirinya masing-masing, tapi saya sangat menganjurkan terutama buat temen-temen programmer atau web designer untuk mempelajari VCS ini, karena tools-tools seperti ini ada untuk mempermudah pekerjaan kita dan kita sendiri yang akan merasakan manfaatnya.

1. Direktori di PC Keliatan lebih Rapih

Screenshot dibawah adalah versioning file dengan jurus manual ketika saya bikin Proposal Bakti Sosial beberapa waktu yang lalu (saya masih belum ngerti Version Control).


Padahal kalau waktu itu saya memanfaatkan Version Control, saya enggak usah bikin file sebanyak itu. Cukup 1 tapi ada beberapa versi.

2. Tracking Changes

Kita bisa menambahkan keterangan pada setiap revisi yang kita kerjakan misalnya perubahan apa saja yang ditambahkan. Jadi nanti kita bisa tahu apa saja perbedaan antara versi 1 dengan versi lainnya, sehingga untuk memeriksa perbedaan versi terbaru dengan versi sebelumnya kita tidak usah berpindah ke versi sebelumnya, cukup masukan beberapa perintah dan keterangan yang kita buat sebelumnya akan muncul.

3. Long-Term Undo

"Kalau cuma buat kembali ke versi sebelumnya kan bisa pake undo aja ya? Kalau mau balik lagi ke yang baru tinggal pake Redo bisa kan?"
Ya kita bisa melakukannya dengan catatan hanya bisa kembali ke beberapa action sebelumnya/sesudahnya dan kita sedang memodifikasi 1 file saja. Terus bagaimana kalau kita ingin kembali ke revisi 2 tahun yang lalu dan kita sedang memodifikasi source code website yang didalamnya ada banyak HTML, CSS, dan JavaScript? Dengan Version Control kita bisa melakukannya, kita bisa melakukan undo terhadap banyak file sekaligus dan kembali ke revisi beberapa hari, bulan, atau bahkan tahun yang lalu.

4. Dan masih banyak lagi.



Ya kurang lebih seperti itu gambaran singkat mengenai Verson Control, jika masih kurang jelas silahkan curat-coret di kolom komentar atau bisa baca-baca referensi lain. Artikel ini merupakan pengantar dari pembahasan kita nanti yaitu belajar Git. Oh iya ngomong-ngomong saya juga baru belajar, jadi saya bikin artikel ini bukan berarti udah jago, itung-itung catetan aja biar enggak lupa hehe..
Oke, terima kasih atas kunjungannya. Semoga bermanfaat, mohon maaf bila masih banyak kekurangan.
Wassalamu'alaikum Warahmatullahi Wabarakatuh.

Referensi:
Mengenal GIT (2012), Anggie Bratadinat
Sumber Gambar:
http://kevinpelgrims.com/blog/2012/07/05/version-control-best-practices/
https://www.codepolitan.com/meme/

HTML

More »

PHP

More »