Video Optimization
ဗီဒီယိုတွေရဲ့ အဓိက ပြဿနာ
Section titled “ဗီဒီယိုတွေရဲ့ အဓိက ပြဿနာ”ဗီဒီယိုဖိုင်တွေဟာ များသောအားဖြင့် ဖိုင်အရွယ်အစား (Size) အလွန် ကြီးမားတတ်ပါတယ်။ စနစ်တကျ ပြင်ဆင် (Optimize) မလုပ်ထားတဲ့ ဗီဒီယိုတွေဟာ Website ရဲ့ မြန်နှုန်း (Performance) ကို သိသိသာသာ ဆိုးရွားစွာ ထိခိုက်စေနိုင်ပြီး သုံးစွဲသူရဲ့ Data တွေကိုလည်း အလွန်အကျွံ ကုန်ဆုံးစေပါတယ်။
ဗီဒီယိုကို Optimize လုပ်ရန် အဓိက နည်းလမ်းများ
Section titled “ဗီဒီယိုကို Optimize လုပ်ရန် အဓိက နည်းလမ်းများ”၁။ ထိရောက်တဲ့ Format နဲ့ Codec တွေကို ရွေးချယ်ပါ
Section titled “၁။ ထိရောက်တဲ့ Format နဲ့ Codec တွေကို ရွေးချယ်ပါ”- MP4 (H.264 Codec): အသုံးအများဆုံးနဲ့ Browser အားလုံး၊ Device အားလုံးနီးပါးက အပြည့်အဝ ပံ့ပိုးပေး (Support လုပ်) တဲ့ အမျိုးအစား ဖြစ်ပါတယ်။ (Standard အနေနဲ့ သုံးသင့်ပါတယ်)။
- WebM (VP9 သို့မဟုတ် AV1 Codec): MP4 ထက် ဖိုင်အရွယ်အစားကို ပိုမို သေးငယ်အောင် ချုံ့ (Compress) ပေးနိုင်ပေမဲ့၊ Support ပေးတဲ့ Browser နည်းနည်း ပိုရှားပါတယ်။ AV1 ကတော့ လက်ရှိမှာ အထိရောက်ဆုံးနဲ့ အကောင်းဆုံး Compression ကို ပေးစွမ်းနိုင်တဲ့ မျိုးဆက်သစ် Codec ဖြစ်ပါတယ်။
- Browser မျိုးစုံနဲ့ ကိုက်ညီမှု (Compatibility) ရှိစေဖို့အတွက်
<video>Element ထဲမှာ<source>Tag အများအပြားကို ထည့်သွင်း အသုံးပြုသင့်ပါတယ်။ (Browser က သူ Support ပေးတဲ့ ပထမဆုံး ဖိုင်ကို အလိုအလျောက် ရွေးချယ် ဖွင့်ပေးပါလိမ့်မယ်)။
ဥပမာ -
<video controls width="640" height="360"> <source src="movie.webm" type="video/webm"> <source src="movie.mp4" type="video/mp4"> Sorry, your browser doesn't support embedded videos.</video>၂။ ဗီဒီယိုတွေကို ချုံ့ပါ (Compress Videos)
Section titled “၂။ ဗီဒီယိုတွေကို ချုံ့ပါ (Compress Videos)”ဗီဒီယိုတွေကို တိုက်ရိုက် မတင်ခင်မှာ HandBrake, FFmpeg ဒါမှမဟုတ် အခြား Online Converter တွေလို Tools တွေကို အသုံးပြုပြီး၊ အရည်အသွေး အရမ်း မကျဆင်းစေဘဲ ဖိုင်အရွယ်အစား သေးငယ်သွားအောင် (Resolution လျှော့တာ၊ Bitrate ချိန်ညှိတာ) မဖြစ်မနေ ပြုလုပ်သင့်ပါတယ်။
၃။ poster attribute ကို အသုံးပြုပါ
Section titled “၃။ poster attribute ကို အသုံးပြုပါ”<video>Tag မှာposterဆိုတဲ့ Attribute ကို ထည့်ပေးထားခြင်းအားဖြင့်၊ ဗီဒီယိုကို Download လုပ်နေချိန် ဒါမှမဟုတ် သုံးစွဲသူက Play ခလုတ် မနှိပ်ခင် အချိန်အထိ ပြသထားမယ့် အဖုံးပုံ (Thumbnail Image) ကို သတ်မှတ်ပေးနိုင်ပါတယ်။- ဒါဟာ မျက်နှာပြင် အလွတ်ကြီး ဖြစ်မနေဘဲ Website က ချက်ချင်း ပွင့်လာတယ်လို့ ထင်မြင်စေပါတယ်။ ထို့အပြင် ဗီဒီယိုက စာမျက်နှာရဲ့ အကြီးဆုံး Element (LCP) ဖြစ်နေခဲ့မယ်ဆိုရင်၊ ဗီဒီယိုကြီး Load ဖြစ်တာကို စောင့်စရာမလိုဘဲ Poster ပုံလေး ပေါ်လာတာနဲ့တင် LCP ရမှတ်ကို ကောင်းမွန်သွားစေပါတယ်။
- ဥပမာ:
<video poster="video-poster.jpg" controls> ... </video>
၄။ ဗီဒီယိုများကို လိုအပ်မှ Load လုပ်ခြင်း (Lazy Loading Videos)
Section titled “၄။ ဗီဒီယိုများကို လိုအပ်မှ Load လုပ်ခြင်း (Lazy Loading Videos)”- ပုံ (Images) တွေလိုပဲ Website ရဲ့ အောက်ဘက် (မြင်ကွင်းမှာ မရှိသေးတဲ့ နေရာ) မှာ ရှိနေတဲ့ ဗီဒီယိုတွေကို အဲ့ဒီ နေရာနား ရောက်ခါနီးမှသာ Load လုပ်သင့်ပါတယ်။
- ဝမ်းနည်းစရာက
<video>Tag တွေအတွက် Nativeloading="lazy"Attribute ဟာ အပြည့်အဝ Standard မဖြစ်သေးသလို Browser တိုင်းကလည်း Support မပေးသေးပါဘူး။ ဒါကြောင့် လက်ရှိမှာ Poster ပုံကိုသာ အရင် Lazy Load လုပ်ထားပြီး၊ User က Play နှိပ်တဲ့ အခါကျမှ JavaScript နဲ့ ဗီဒီယို Source ကို ပြောင်းထည့်ပြီး ဖွင့်ပေးတဲ့ နည်းလမ်း တွေကို အသုံးများကြပါတယ်။ - Embedded ဗီဒီယိုတွေအတွက် (ဥပမာ - YouTube, Vimeo): iFrame ကြီးကို ချက်ချင်း Load လိုက်မလုပ်ဘဲ၊ ပေါ့ပါးတဲ့ Preview ပုံလေး (Facade) ကို အရင် ပြသထားပါ။ သုံးစွဲသူက အဲ့ဒီပုံကို နှိပ်လိုက်မှသာ YouTube Video Player အပြည့်အစုံကို Load လုပ်ပြီး ပြသပေးတာက Performance အတွက် အများကြီး ကောင်းမွန်စေပါတယ်။
၅။ အလိုအလျောက် ဖွင့်ခြင်း (Autoplay) ကို ဆင်ခြင်ပါ
Section titled “၅။ အလိုအလျောက် ဖွင့်ခြင်း (Autoplay) ကို ဆင်ခြင်ပါ”- ဗီဒီယိုတွေကို Website ပွင့်တာနဲ့ အလိုအလျောက် ဖွင့်ခိုင်းတာ (အထူးသဖြင့် အသံပါ ပါဝင်နေရင်) ဟာ သုံးစွဲသူတွေအတွက် အလွန် စိတ်အနှောင့်အယှက် ဖြစ်စေသလို၊ မလိုအပ်ဘဲ Data အများကြီးကိုလည်း ကုန်ဆုံးစေပါတယ်။
- အကယ်၍ (ဥပမာ - Background Video လိုမျိုး) မဖြစ်မနေ Autoplay လုပ်ဖို့ လိုအပ်တယ်ဆိုရင်တောင်၊ အသံကို မဖြစ်မနေ ပိတ်ထားပေးဖို့ (
muted) လိုအပ်ပါတယ်။ - ဥပမာ:
<video autoplay muted loop playsinline> ... </video>(ဒီလို ရေးမှသာ ဖုန်းတွေမှာပါ အလုပ်လုပ်မှာ ဖြစ်ပါတယ်)။
၆။ Adaptive Bitrate Streaming (ABS)
Section titled “၆။ Adaptive Bitrate Streaming (ABS)”- အချိန် ကြာမြင့်တဲ့ ဗီဒီယိုတွေ (ဥပမာ - ရုပ်ရှင်၊ သင်ခန်းစာ အရှည်ကြီးတွေ) အတွက်နဲ့၊ သုံးစွဲသူရဲ့ အင်တာနက် လိုင်း မတည်ငြိမ်တဲ့ အခြေအနေတွေအတွက် အကောင်းဆုံး နည်းလမ်း ဖြစ်ပါတယ်။
- ABS ဆိုတာက Video Player ကို သုံးစွဲသူရဲ့ လက်ရှိ အင်တာနက် အမြန်နှုန်း (Bandwidth) အပေါ် မူတည်ပြီး၊ ဗီဒီယို အရည်အသွေး (ဥပမာ - 1080p, 720p, 480p) အမျိုးမျိုး ကြားမှာ အလိုအလျောက် အတက်အကျ ပြောင်းလဲ (Switch) ခွင့်ပြုပေးတဲ့ စနစ်ပါ။ (YouTube, Netflix တို့မှာ သုံးတဲ့ စနစ်မျိုးပါ)။
- HLS (HTTP Live Streaming) ဒါမှမဟုတ် DASH လို Protocol တွေကို သုံးရတဲ့အတွက် အနည်းငယ် ပိုမို အဆင့်မြင့်တဲ့ (Advanced) နည်းလမ်း တစ်ခု ဖြစ်ပါတယ် ခင်ဗျာ။