Skip to content
GitHub

Videos & Audios

Video များ ထည့်သွင်းခြင်း

Section titled “Video များ ထည့်သွင်းခြင်း”

<video> tag ကိုသုံးပြီး webpage တွေမှာ video တွေကို ထည့်သွင်းနိုင်ပါတယ်။ ဒါက user တွေကို browser ထဲမှာ တိုက်ရိုက် video ကြည့်ခွင့်ပေးပါတယ်။

အခြေခံ Video Tag:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

  • <video>: Video ထည့်သွင်းဖို့သုံးတဲ့ tag ပါ။

  • width and height: Video player ရဲ့ အရွယ်အစားကို သတ်မှတ်ပေးပါတယ်။

  • controls: အခြေခံ video control တွေ (play, pause, volume) ကို ထည့်ပေးပါတယ်။

  • <source>: Video file နဲ့ သူ့ရဲ့ format ကို သတ်မှတ်ပေးပါတယ်။ Format မတူတဲ့ source မျိုးစုံ (ဥပမာ .mp4, .webm) ထည့်ပေးနိုင်ပါတယ်။

ဘာကြောင့် Source မျိုးစုံ သုံးရတာလဲ?

Section titled “ဘာကြောင့် Source မျိုးစုံ သုံးရတာလဲ?”

Browser တစ်ခုနဲ့တစ်ခုက video format တွေ support လုပ်တာ မတူကြပါဘူး။ Source မျိုးစုံထည့်ပေးထားတော့ browser အားလုံးမှာ အလုပ်လုပ်တာ သေချာသွားတာပေါ့။

Audio များ ထည့်သွင်းခြင်း

Section titled “Audio များ ထည့်သွင်းခြင်း”

<audio> tag ကို သင့် webpage ထဲကို audio file တွေ (သီချင်း၊ podcast၊ sound effect တွေလိုမျိုး) ထည့်ဖို့ သုံးပါတယ်။

အခြေခံ Audio Tag:

<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
  • <audio>: Audio file ထည့်သွင်းဖို့သုံးတဲ့ tag ပါ။

  • controls: Play, pause, volume လိုမျိုး audio control တွေကို ထည့်ပေးပါတယ်။

  • <source>: Audio file နဲ့ သူ့ရဲ့ format (ဥပမာ .mp3, .ogg) ကို သတ်မှတ်ပေးပါတယ်။

Media File များအတွက် အကောင်းဆုံးအလေ့အကျင့်များ

Section titled “Media File များအတွက် အကောင်းဆုံးအလေ့အကျင့်များ”

ကိုယ့် website မှာ ပုံ၊ video, audio တွေသုံးတဲ့အခါ၊ အောက်ပါအကောင်းဆုံးအလေ့အကျင့်တွေကို ထည့်သွင်းစဉ်းစားသင့်ပါတယ်-

  • ပုံ Size တွေကို Optimize လုပ်ပါ - ပုံအကြီးကြီးတွေက သင့် website ကို နှေးကွေးစေနိုင်ပါတယ်။ အရည်အသွေးနဲ့ file size မျှတအောင် ပုံတွေကို အမြဲ compress လုပ်ပါ။

  • Responsive Media ကို သုံးပါ - သင့် media file တွေက မတူညီတဲ့ screen size တွေအလိုက် အလိုက်သင့်ပြောင်းလဲသွားအောင် Responsive CSS တွေကို သုံးပါ။

  • စာသားဖြင့် အစားထိုးဖော်ပြချက်တွေ ထည့်ပေးပါ - Accessibility အတွက် ပုံတွေမှာ alt text ကို အမြဲသုံးပါ။ Video နဲ့ audio တွေအတွက်တော့ transcripts ဒါမှမဟုတ် captions တွေ ထည့်ပေးဖို့ စဉ်းစားပါ။

  • Browser တွေမှာ အဆင်ပြေအောင်လုပ်ပါ - Video နဲ့ audio တွေ browser အားလုံးမှာ အလုပ်လုပ်တာသေချာအောင် format မျိုးစုံသုံးပါ။