Mie's Notes » plugin

HTML5 Video Player

Hielmy — Thu, 28 Jan 2010 13:22:55 +0000

Baru-baru ini ada sebuah fitur baru diluncurkan oleh dua layanan video sharing populer YouTube dan Vimeo yaitu fitur video player dengan HTML5. dengan menggunakan video player HTML5 ini, kita tidak usah menggunakan flash player untuk memainkan video yang ada di situs tersebut, melainkan bisa diputar secara native karena di render langsung oleh peramban (browser) yang sudah mendukung standar baru HTML5.

Ilustrasi

Konon, sampai saat ini peramban yang didukung oleh kedua situs tersebut baru Google Chrome, Apple Safari dan Internet Explorer dengan pengaya Chrome Frame, karena baru peramban inilah yang sudah mendukung standar HTML5 secara baik, saya belum tahu apakah peramban terbaru yang sedang populer sekarang Firefox 3.6 sudah mendukung HTML5 dan didukung oleh kedua situs video sharing tersebut atau belum.

Untuk mengaktifkan mode HTML5 player cukup mudah, pada situs Vimeo, coba buka saja salah satu video, kemudian cari di bagian kanan bawah tidak jauh dari jendela video, klik tulisan switch to HTML5 Player. Untuk situs YouTube juga sama mudahnya, caranya masuk ke halaman http://youtube.com/html5, pada halaman itu akan ada keterangan apakah peramban yang anda pakai sudah mendukung HTML5 atau belum, jika sudah, klik Join the HTML5 Beta di bagian bawah, maka setiap video yang anda putar nantinya akan diputar dengan HTML5 Player.

Saya sendiri sudah mencoba kedua “fitur” baru tersebut, walau masih dalam status “percobaan” tapi hasilnya cukup bagus, terutama untuk video yang diputar dari situs Vimeo, hampir tidak ada perbedaan dengan flash player yang mereka miliki, baik dari segi performa maupun antarmuka player -nya. Untuk situs YouTube pun demikian, namun sepertinya performanya tidak sebaik Vimeo, seringkali video tersendat dan stuck di tengah (bukan karena loading/buffering), setiap membuka satu video pun indikator video buffer (warna merah) selalu terisi penuh, padahal proses loading belum dimulai, ini artinya sistem tidak bekerja dengan semestinya. Dalam percobaan tersebut saya menggunakan peramban Google Chrome, saya belum mencoba dengan peramban lain, bisa saja hasilnya berbeda, karena proses rendernya memang sangat tergantung dari perambannya itu sendiri, berbeda dengan flash player yang dirender oleh plugin Adobe Flash Player.

Saya sendiri berharap HTML5 ini menjadi standar umum dalam waktu dekat, termasuk untuk video player, dengan demikian kita tidak selalu harus bergantung kepada pengaya pihak ketiga seperti Flash Player, setiap peramban bisa menampilkan isi situs yang interaktif tanpa memerlukan banyak pengaya. Namun (lagi-lagi) konon, untuk mencapai standar HTML5 yang sempurna masih jauh, jadi sepertinya kita masih harus lebih bersabar lagi.

Tulisan lain yang mungkin berkaitan:

Fixing Browser Sniff Plugin

Hielmy — Sun, 17 Jan 2010 16:44:34 +0000

Pada tulisan sebelumnya beberapa waktu lalu, saya sempat mengeluhkan mengenai plugin Browser Sniff yang tidak bisa mendeteksi peramban (browser) Google Chrome saya, setiap kali menggunakan Google Chrome, plugin tersebut mendeteksinya sebagai Safari yang berjalan pada sistem operasi Mac OS X, padahal kadang saya menggunakan Google Chrome versi Linux atau Windows. Hal ini terjadi karena sang pembuat plugin yaitu om Priyadi tidak memperbaharui plugin buatannya itu, sehingga belum bisa mendeteksi peramban Google Chrome yang terhitung baru, dia mendeteksi sebagai Safari karena masih menggunakan render engine yang sama yaitu WebKit. Selain itu, sistem operasi terbaru dari Microsoft yaitu Windows 7 belum terdeteksi oleh plugin ini.

Barusan saya iseng-iseng buka berkas plugin Browser Sniff yang hanya terdiri dari satu buah berkas PHP, ceritanya pengen nyobain otak-atik, siapa tahu bisa memperbaiki ‘bug’ tersebut, setelah beberapa menit melototin kode PHP (yang sama sekali tidak saya mengerti), bermodal logika kecil-kecilan saya simpulkan saja kalau ingin mendeteksi suatu sistem operasi maupun peramban baru, tinggal menambahkan saja entri baru ke barisan kode tersebut, bedanya tinggal bedakan saja “identifier” dari entri tersebut. Setiap peramban memiliki user agent yang bisa memberitahukan jenis peramban, versi maupun sistem operasi yang digunakan, dari data user agent inilah plugin Browser Sniff mengambil data untuk ditampilkan di bagian komentar pada suatu blog berbasis WordPress. nah jika kita ingin menambahkan entri baru, tinggal masukan saja identifier peramban dan sistem operasi yang baru ke entri tersebut, sehingga peramban dan sistem operasi baru bisa dikenali oleh plugin ini.

Langsung saja ke langkah editing, untuk menambahkan fungsi agar bisa mendeteksi peramban Google Chrome, cukup menambahkan baris kode berikut ke berkas:

} elseif (preg_match('#Chrome/([a-zA-Z0-9.]+)#i', $ua, $matches)) {
		$browser_name = 'Google Chrome';
		$browser_code = 'chrome';
		$browser_ver = $matches[1];
		if (preg_match('/Windows/i', $ua)) {
			list($os_name, $os_code, $os_ver) = pri_windows_detect_os($ua);
		} else {
			list($os_name, $os_code, $os_ver) = pri_unix_detect_os($ua);
		}

Nah sekarang tinggal memasukan kode agar plugin tersebut juga bisa mendeteksi sistem operasi Windows 7, kodenya sebagai berikut:

} elseif (preg_match('/Windows NT 6.1/i', $ua)) {
		$os_name = "Windows";
		$os_code = "windows";
		$os_ver = "7";

Perhatikan identifier kernel untuk Windows 7 adalah Windows NT 6.1, sehingga apabila user agent peramban memberikan data kernel tersebut, maka akan dikenali sebagai Windows 7. sekarang mari kita lihat hasilnya, setelah di otak atik kodenya, ternyata Browser Sniff berhasil mendeteksi peramban Google Chrome dan sistem operasi Windows 7 seperti terlihat di gambar berikut:

Browser Sniff bisa mendeteksi Google Chrome dan Windows 7

Cukup mudah bukan? anda bisa memasukan/mengetikan kode-tersebut di berkas plugin Browser Sniff dengan menggunakan plugin editor yang ada di WordPress maupun editor teks lainnya, atau jika masih bingung dan takut salah mau menyisipkannya dimana? silakan unduh berkasnya yang telah saya perbaharui disini. selamat mencoba.

Tulisan lain yang mungkin berkaitan:

Lifestream

Hielmy — Sat, 12 Dec 2009 12:49:12 +0000

Sudah lama terpikir oleh saya ingin membuat suatu halaman yang berisi rangkuman “kegiatan” saya di internet, misal blog post, video post, bookmark post, status, dll. tapi karena malas yang selalu mendera *beuh* niat untuk membuat halaman tersebut tidak jadi-jadi, akhirnya hari ini karena benar2 ngga ada kerjaan dan ga ada teman, saya iseng2 bikin dengan memanfaatkan plugin WordPress Lifestream.

Tadinya saya ingin membuat satu halaman khusus di blog ini untuk dijadikan halaman Lifestream ini, tapi dipikir2 mending membuat satu web independen saja, karena disana isinya tidak hanya rangkuman dari blog ini, tapi dari semua blog yang saya punya plus “laporan” dari beberapa jejaring sosial dan situs2 layanan internet lainnya, jadi biar adil akhirnya saya buat terpisah. bermodal satu instalasi baru WordPress dan plugin Lifestream serta theme yang sederhana, setelah otak-atik sekitar 3 jam, akhirnya situs tersebut selesai juga, anda bisa melihatnya disini.

Nah, dengan adanya halaman Lifestream ini, jika ingin “mengikuti” jejak saya tidak usah susah-susah, tinggal lihat saja di halaman tersebut, maka semua “catatan” kegiatan saya di dunia maya terekam disana, asik kan? *kepedean, berasa populer, hehe…*, web ini benar2 hanya terdiri dari satu halaman, masalah desain, jangan tanya, masih tetap sederhana dan minimalis seperti biasa. halaman tersebut akan terupdate secara otomatis apabila saya melakukan update di blog, jejaring sosial seperti Last.fm, Tumblr, Twitter, Twitpic, dll. juga dari layanan multimedia seperti Youtube, vimeo, Picasa, Flickr, dll. tidak lupa bookmark yang saya simpan di Delicious juga akan masuk ke Lifestream itu. tujuan utamanya sebenarnya sih untuk arsip pribadi saja, tapi jika memang bisa bermanfaat juga untuk orang lain, kenapa tidak?!

Mie’s Lifestream: http://lifestream.hielmy.web.id

Tulisan lain yang mungkin berkaitan:

Google Chrome Terdeteksi Sebagai Safari

Hielmy — Wed, 25 Nov 2009 14:40:05 +0000

Setelah beberapa hari lalu saya menginstall plugin browser sniff untuk WordPress, saya baru ngeh kalu ternyata browser yang saya gunakan di sistem operasi Linux yaitu Google Chrome terdeteksi sebagai Safari oleh wordpress, lebih lucu lagi OSnya pun terdeteksi sebagai Mac OS X, hehe… hal ini terjadi mungkin karena plugin tersebut belum “mengenal” Chrome, tapi karena layout engine nya sama dengan Safari yaitu WebKit, jadi Google Chrome ini terdeteksi sebagai Safari, tapi untuk urusan salah deteksi sistem operasi saya juga kurang mengerti kenapa.

Sebenarnya identitas asli dari browser yang dipakai bisa diketahui, jika kita membuka blog ini dengan browser berbasis WebKit (tidak berlaku untuk Firefox dan Opera), maka akan ada tanda bintang disamping keterangan browser dan OS pada kolom komentar (lihat gambar dibawah), apabila kita hover kursor disana, maka akan muncul tooltip yang menunjukan “jati diri” asli si browser plus sistem operasi yang digunakan. terkadang memang saya juga online dari laptop dan memang benar2 menggunakan sistem operasi Mac, sepintas hasil deteksi dari browser sniff sama saja seperti ketika saya menggunakan Chrome di Linux, tapi apabila di hover ke tanda bintang tersebut, baru deh keliatan aslinya. berikut tangkapan layar ketika saya menggunakan Linux:

Google Chrome terdeteksi sebagai Safari di Mac OS X

berikut tampilan ketika menggunakan Mac OS:

Dari tooltip inilah bisa diketahui "jati diri" asli browser

Oh iya, untuk Windows 7 pun rasanya belum bisa terdeteksi dengan baik, plugin ini hanya menampilkan “windows NT” sebagai sistem operasinya. Saya juga belum pernah mencoba menggunakan Konqueror untuk mengakses blog ini, apakah akan terdeteksi juga sebagai Safari? secara Konqueror ini dedengkotnya WebKit . Sebenarnya “bug” ini bukan masalah berarti sih, malah bisa jadi ajang gaya2an, coba deh kalau anda mengunjungi blog dengan plugin browser sniff/detector, pakailah Google Chrome untuk browsing supaya nantinya terdeteksi sebagai Safari dan menggunakan Mac OS X, kan keren tuh, iya ngga?

Tulisan lain yang mungkin berkaitan:

Blog Stats Tidak Berfungsi

Hielmy — Sat, 21 Nov 2009 02:15:00 +0000

Beberapa hari yang lalu saya memasang plugin Blog Stats dari automattic yang juga digunakan dalam blog2 di wordpress.com, cara instalasi saya ikuti sesuai instruksi yang tersedia, tapi anehnya sampai sekarang kenapa statistik ini tidak menampilkan data ya? dari sejak mulai dipasang datanya masih nol saja, padahal dari statistik yang lain (kebetulan di blog ini saya menggunakan Google Analytics dan statistik MyBlogLog) bisa menampilkan data. apa ada yang salah ya? jangan2 ada semacam script yang harus disisipkan ke dalam blog agar servernya bisa mendeteksi pengunjung dari blog, soalnya yang saya tau untuk layanan statistik lain memang biasanya menyisipkan script kedalam halaman blog, tapi yang ini tidak. ada yang tau kenapa bisa begitu?

Statistik masih nol

Update:

ternyata memang benar ada yang salah, theme saya sebelumnya tidak melakukan call ke fungsi . Akhirnya setelah theme-nya di otak atik dikit, sekarang sudah berfungsi deh…

Tulisan lain yang mungkin berkaitan: