HTML 5 Video နဲ့ Flash Fall back

ဒီေဆာင္းပါးကို မဖတ္ခင္သင္ဟာ

1. HTML,

2. CSS,

3. Javascript ေတြကို သိရွိနားလည္ျပီးျဖစ္ရပါမယ္ ။
ေခါင္းစဉ္ျကည္.ျပီး လန့္မသြားပါနဲ့ ။ browser မွာ ဗီဒီယိုဖြင့္ျပတဲ့ အေျကာင္းပါပဲ ။
မျကာေသးမီနစ္မ်ားအတြင္းက Apple ရဲ့ အမူေဆာင္အရာရွိ ၊ ကြယ္လြန္သြားရွာျပီျဖစ္တဲ့ Steve Jobs က ထုတ္လုပ္တဲ့ ipadနဲ့ iphone ေတြမွာ flash support ကို ဖယ္ရွားခဲ့ပါတယ္ ။ Steve ရဲ့ဆံုးျဖတ္ခ်က္က စဉ္စားစရာလဲျဖစ္ပါတယ္ ။ ဟိုးအရင္တုန္းက floppy drive ေတြကိုလဲ ထုတ္ပစ္ခဲ့ျပီး ၊ ေနာက္ပိုင္းထြက္လာတဲ့ Mac-Book Air မွာလဲ DVD Drive ပါမလာေတာ့ပါဘူး ။ လုပ္ခဲ့သေလာက္ ခုထိေတာ့ မွန္ေသးတယ္ ေျပာရမွာပါ ။ သူ.ရဲ့ အေျကာင္းျပခ်က္ကေတာ့ ဘက္ထရီစားတဲ့ ကိစၥနဲ့ ၊ performance penalty ပါ ။

Flash ကို adobe ကထုတ္ပါတယ္ ။ Flash ကို ဗီဒီယိုဖိုင္ေတြ ကိုျပသရံုတင္မကပဲ ၊ animation မွာလဲ က်ယ္က်ယ္ျပန့္ျပန့္အသံုးျပုပါတယ္ ။ ကွြ်န္ေတာ္ ဝက္ဘ္စသင္တဲ့ ကာလမွာပဲ flash ကို မသံုးဖို. ဆရာသမားေတြက တားပါတယ္ ။ ဘာရယ္ေသခ်ာမသိခဲ့ေပမယ့္ bandwidth ေတာ္ေတာ္စားတာေတာ့ သတိျပုမိခဲ့ပါတယ္ ။

Web developer တစ္ေယာက္အေနနဲ့ အေျခခံ မရွိမျဖစ္တတ္သင့္တဲ့ အရာ ေလးမ်ိုးရွိပါတယ္ ။ HTML, CSS , Javascript နဲ့ Photoshop လိုမ်ိုး graphic editing tool တစ္ပါ ။ Flash ကို မတတ္လဲရပါတယ္ ။ အရင္တုန္းကေတာ့ Flash ကို မင္းသားမင္:သမီးလိုမ်ိုး ၊ ရုပ္ရွင္ဆိုက္လိုမ်ိုး ၊ ဖက္ရွင္ဆိုက္လိုမ်ိုးေတြက အသံုးျပုျကပါတယ္ ။ အခုေတာ့ jQuery ကို ေျပာင္းလာပါျပီ ။ Flash ကို dead technology လို.ေျပာဖို.ေတာ့ နည္းနည္းေစာေသးတယ္ ထင္ပါတယ္ ။ Video file ေတြကို ျပသတဲ့ေနရာမွာFlash Video Player ကို အသံုးျပုပါတယ္ ။ Flash ကို Browser ရဲ့ plugin အေနနဲ့ ထဲ့သြင္းရမွာပါ ။ Flash player ဟာ free ေပးေပမယ့္ Adobe ရဲ့ ပိုင္ဆိုင္တဲ့product တစ္ခုျဖစ္ပါတယ္ ။



Flash player ကိုသံုးတဲ့သူတိုင္း ျကံုေတြရမွာ တစ္ခုကေတာ့ i-devices ေတြမွာ ျဖစ္မရတာပါ ။ Apple က ေဈးကြက္ရဲ့ ၂၅%ကို ျကိုးစိုးထားတယ္ဆိုေတာ့ ၁/၄ပံုရွိတဲ့ စက္ေတြမွာ ဖြင့္မရတဲ့ သေဘာပါ ။ Flash Player ကို သံုးရင္ သိသာတဲ့အခ်က္ကေတာ့ ခဏခဏဟမ္:တတ္တယ္ဆိုတာပါ ။ ဘာျဖစ္လို.လဲဆိုေတာ့ သူက HTML မွာပါတဲ့ Standard မဟုတ္ပါဘူး ။ plugin အေနနဲ့ ျဖစ္ေနတာလဲပါပါတယ္ ။ ေနာက္ျပီး မေကာင္းတာတစ္ခုက browser version အသစ္တစ္ခုထြက္တိုင္း update လုပ္ရပါတယ္ ။

ေနာက္တစ္ခုက ease-of-access ပါ ။ browser တစ္ခုစီအတြက္ flash plugin ေတြသီးသန့္သြင္းေပးရပါတယ္ ။ IE အတြက္တစ္ခု ၊ Firefox အတြက္တစ္ခုဆိုတာမ်ိုးပါ ။ line of code ေတြကို ေလ့လာျကည္.ရေအာင္ ။ အားလံုးနဲ့ အဆင္ေျပေအာင္ Google ကထုတ္တဲ့ Chrome Browser ကိုသံုးထားပါတယ္ ။
ပထမဆံုး Flash ကိုေလ့လာျကည္.ရေအာင္



Video ေလးတစ္ခုျပဖို.ေတာ္ေတာ္ရႈပ္ေထြးတာကို ေတြ့ရမွာပါ ။ 1,2 က movie ရဲ့ source ပါ ။ flash မရွိရင္ download ဆြဲဖို. Link လဲေပးထားပါတယ္ ။ http://www.adobe.com/go/getflash ပါ ။ ေအာက္က ကေတာ့HTML5 ကို သံုးထားတာပါ ။

Video element ကို တစ္ေျကာင္းတည္းေရးလဲရပါတယ္ ။

ဒါကေတာ့ Chrome browser မွာေတြ့ရတဲ့ HTML 5 Video ပါ ။ Stability ေကာ ၊performance ေကာ ၊ developလုပ္ရတာေကာ ေတာ္ေတာ္ေလးကို သာတာကိုေတြ့ရမွာပါ ။ ေနာက္ျပီး ထပ္မံ သြင္းဖို.မလိုပါဘူး ။ HTML ရဲ့ element အျဖစ္တည္ရွိေနလို.ပါ ။
အခက္အခဲေတြ
HTML 5 ဟာေကာင္းမြန္တယ္ေျပာလို.ရေပမယ့္ ။ သံုးဖို.ေတာ့ ခက္ခဲေနပါေသးတယ္ ။ ဘာျဖစ္လို.လဲဆိုေတာ့ Flash Video ကို လူတိုင္းသြင္းထားျပီးသားျဖစ္ေနလို.ပါ ။ ေနာက္ျပီး HTML 5 က လူသံုးမ်ားတဲ့ youtube လိုမ်ိုးမွာ ေတြ့နိုင္တဲ့ .flv extension ေတြကို support မလုပ္ပါဘူး ။ ဘာျဖစ္လို.လဲဆိုေတာ့ Adobe က ပိုင္တဲ့ format ျဖစ္ေနလို.ပါ ။

.mp4 , .ogg, .webM သံုးမ်ိုးကို support လုပ္ပါတယ္ ။ .mp4 ကို လူတိုင္းနားလည္ေပးမယ့္ Firefox က built-in support မလုပ္ေသးတာ ေတာ္ေတာ္ဂြက်ပါတယ္ ။ ေနာက္ျပီး ၂၅%ဆိုတဲ့ ေဈးကြက္က နည္းတာျကီးမဟုတ္ပါဘူး ။ flash သာသံုးမယ္ဆို mobile နဲ့ ကြန္ပ်ူတာ ၁/၄ ေလာက္မွာျကည္.မရဘူးဆိုတဲ့ သေဘာသက္ေရာက္ေနပါတယ္ ။ Andriod မွာေတာ့အားလံုး အိုေက ပါတယ္

.ogg တို.ဘာတို.က ဒီမွာ သိပ္မသံုးျကတဲ့ format ပါ ။ ေအာက္က ဇယားမွာ browser ေတြကို ျပထားပါတယ္ ။
ဒီမွာ အေသးစိတ္ေလ့လာနိုင္ပါတယ္ ။ http://www.w3schools.com/html5/html5_video.asp
Chrome ေလးမွာေတာ့ ေတာ္ေတာ္ကို အဆင္ေျပပါတယ္ ။
Chrome မွာျမင္ခဲ့တဲ့ HTML ေလးကို တျခား browser ေတြမွာ run ရင္ အဆင္မေျပေတာ့ပါဘူး ။ ေလာေလာဆယ္က IE နဲ့ Firefox ဒီမွာ လူသံုးမ်ားတဲ့ browser ေတြပါ ။ ေအာက္ကပံုေတြမွာေတာ့ mp4 ကို စမ္းျပထားပါတယ္ ။



ေျဖရွင္းနည္း

Flash ကိုလဲပစ္လို.မျဖစ္ေသး ၊ HTML 5 သံုးခ်င္တယ္ဆိုရင္ေတာ့ အေကာင္းဆံုးက နစ္ခုစလံုးအတြက္ လုပ္ေပးဖို.ပဲရွိပါေတာ့တယ္ ။ Video JS လိုခဲ့တဲ့ Javascript ကို အေျချပု player ကိုသံုးထားပါတယ္ ။ http://videojs.com/ ဒီမွာအေသးစိတ္ကို ဖတ္ရႈနိုင္ပါတယ္ ။

No.1 မွာေတာ့ HTML 5 ကို သံုးထားျပီး ၊ No.2 မွာေတာ့ HTML 5 Video tag က အဆင္မေျပရင္ သြားရမယ့္ Flash code ကို javascript နဲ့ အုပ္ထားပါတယ္ ။ browser ေတာ္ေတာ္မ်ားမ်ားနဲ့ စမ္းျကည္.နိုင္ပါတယ္ ။
Flash Fallback ဆိုတဲ့ Javascript file ကို ထဲ့ေပးရမွာပါ ။ javascript ကေန detect လုပ္ျပီး HTML 5 မရရင္ Flash ကို ဖြင့္ေပးလိုက္တာပါ ။

Demo ကို ဒီမွာျကည္.နိုင္ပါတယ္ ။ http://videojs.com/video-js/demo.html