Sebenarnya tulisan ini sudah lama sekali saya tulis. Mungkin baru sekarang saya dapat kesempatan untuk mem-publish-nya.
Isu Flash versus HTML5 bukanlah isu baru dalam dunia web. Isu ini sudah muncul sejak 4 atau 5 tahun yang lalu (CMIIW). Permasalahan ini mencuat ketika Apple memutuskan untuk tidak mengizinkan Flash Player terinstall dalam perangkat mobile mereka. Sebagai dampaknya, semua konten berbau swf tidak bisa diakses oleh pengguna iOS.
So what?
Mayoritas video delivery dalam web masih menggunakan Flash Player sebagai video player-nya, termasuk Youtube dan Vimeo. Konsekuensinya, para web developer harus bisa mengakali masalah ini. Para web developer harus membuat fallback bagi para pengguna iOS, sehingga video yang mereka tampilkan dalam situs mereka tetap bisa diakses di iPhone atau iPad.
Biasanya, untuk meng-embed video dalam file HTML Anda, struktur yang digunakan kurang lebih seperti di bawah ini. (Dengan asumsi Anda menggunakan SWFObject)
<!doctype html>
<html>
<head>
<title>HTML5 Video Fallback</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8;" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.src = "link video Anda";
flashvars.controlBarMode = "floating";
var params = {};
params.allowFullScreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
swfobject.embedSWF("http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf", "videoDiv", width, height, versiFlashPlayer, "expressInstall.swf", flashvars, params, attributes);
</script>
</head>
<body>
<div id="videoDiv">
</div>
</body>
</html>
Anda membuat sebuah div tag dengan id videoDiv dalam body HTML Anda dan meng-embed swf-nya dengan javascript di bagian head.
<!doctype html> <html> <head> ... </head> <body> <div id="videoDiv"> <video controls="controls" poster="it is optional, put your thumbnail poster here" width="680" height="382"> <source src="put your video link here" type="video/mp4"/> <source src="put your video link here" type="video/ogg" /> </video> </div> </body> </html>
Di sini Anda menambahkan video tag dalam div videoDiv yang berfungsi sebagai “backup” dalam HTML Anda bila mobile browser client/end-user tidak support (tidak terinstall) Flash Player.
Perlu Anda perhatikan, dalam video tag tersebut terdapat dua source tag. Tag yang pertama memiliki attribute dengan type video/mp4, sedangkan yang kedua adalah video/ogg. Perlu Anda ketahui, bahwa Firefox tidak mendukbng native video dengan format mp4, tapi dia support untuk ogg. Jadi source tag ini semacam fallback untuk tipe browser pada client/end-user.
The Flash Platform Blog 