Adding Video and Audio

Video နဲ့ audio တွေ ကို ကိုယ့်ရဲ့ website ထဲမှာ ထည့်သွင်းနိုင်ပါတယ်။ video ဟာ ကိုယ့်ရဲ့ product ကို ကြော်ငြာ သဘောမျိုး ဒါမှမဟုတ် ရုပ်ရှင် စတာတွေ အတွက် ထည့်သွင်းကြပါတယ်။

Video

Video တွေဟာ internet connection ကောင်းဖို့ လိုပါတယ်။ video ကို ထည့်သွင်းရာမှာ file size ကြီးတဲ့ အခါမှာ video မြင်ရတာ နှေးသွားနိုင်သလို browser တွေ တစ်ခု နဲ့ တစ်ခု ဟာ support လုပ်တဲ့ file format တွေ မတူပါဘူး။

Modern HTML မှာ video ထည့်သွင်းဖို့အတွက် <video> tag ပါဝင်ပါတယ်။ src attribute မှာ <img> tag လိုမျိုး video ရဲ့ ပတ်လမ်းကြောင်းကို ထည့်သွင်းနိုင်ပါတယ်။

Audio

Audio file တွေဟာ ကိုယ့်ရဲ့ site ထဲမှာ သီချင်းတွေ နောက်ပြီးတော့ အသံသွင်းထားတာတွေကို ထည့်ချင်တဲ့ အခါမှာ အသုံးပြုနိုင်ပါတယ်။ နောက်ပြီးတော့ podcast လိုမျိုး စကားပြော အခန်း ဆက်တွေလိုမျိုး website တွေမှာလည်း အသုံးပြုနိုင်ပါတယ်။

Modern HTML မှာ audio ထည့်သွင်းဖို့အတွက် <audio> tag ပါဝင်ပါတယ်။ src attribute မှာ <img> tag လိုမျိုး audio file ရဲ့ ပတ်လမ်းကြောင်းကို ထည့်သွင်းနိုင်ပါတယ်။

Files

Video file တွေဟာ audience, device, connection speed ပေါ်မူတည်ပြီး 480p, 720p, 1080p, 4K စတာတွေကို ရွေးချယ်အသုံးပြုနိုင်ပါတယ်။ Website မှာတော့ file size, loading speed, mobile data usage တွေကို သတိထားပြီး resolution အမျိုးမျိုး ထားပေးတာ ပိုကောင်းပါတယ်။

Audio, Video file တွေကို ပြောင်းဖို့အတွက် converter တော်တော်များများ ရှိပါတယ်။ HandBrake converter ဟာ video တွေကို ပြောင်းလဲဖို့ အတွက် ကောင်းမွန်တဲ့ App ဖြစ်ပြီးတော့ free လည်း ဖြစ်ပါတယ်။ WebM, MP4 စတဲ့ format တွေကို ပြောင်းလဲနိုင်ပါတယ်။

Different Browsers, Different Formats

Video, Audio တွေဟာ browser ပေါ်မှာ မူတည်ပြီး support လုပ်တာ ကွာနိုင်ပါတယ်။ အခုခေတ်မှာတော့ MP4/H.264 video နဲ့ MP3/AAC audio ကို browser အများစုမှာ support ကောင်းကောင်း ရှိပါတယ်။ WebM ကိုလည်း modern browsers တွေမှာ အသုံးများလာပါတယ်။ Ogg/Theora ကို compatibility အတွက် အဓိက format အဖြစ် မရွေးတော့ဘဲ fallback အနေနဲ့သာ ထည့်သင့်ပါတယ်။

Format	Common Use
MP4 (H.264/AAC)	အများဆုံး compatible ဖြစ်တဲ့ video format
WebM (VP9/AV1/Opus)	Modern browser တွေမှာ သုံးနိုင်တဲ့ efficient video format
MP3	အများဆုံး compatible ဖြစ်တဲ့ audio format
Ogg/Opus	Open format audio အတွက် အသုံးပြုနိုင်

Insert a Video File

ကျွန်တော်တို့ webpage မှာ video ကို <video> tag အသုံးပြုပြီး ထည့်သွင်းနိုင်ပါတယ်။ src attribute မှာ video သိမ်းထားတဲ့ နေရာလေးကို ထည့်ပေးလိုက်ရင် ရပါပြီ။ Browser မှာ play , pause စတဲ့ control နဲ့ video progress စတာတွေ ပါလာပါလိမ့်မယ်။ UI က browser ပေါ်မှာ မူတည်ပြီး ပြောင်းလဲ မှု ရှိပါတယ်။ နောက်တနည်းကတော့ youtube လိုမျိုး video host မှာ တင်ပြီးတော့ မိမိ ရဲ့ website ထဲမှာ embed လုပ်ပြီး ထည့်တဲ့ နည်းပါပဲ။

အရင်ဆုံး ကျွန်တော်တို့တွေ video tag နဲ့ ထည့်ကြည့်ရအောင်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>
  <h1>Big Buck Bunny</h1>
  <video src="movie.mp4" controls>
    Your browser does not support the video tag.
  </video>
</body>
</html>

video မှာ movie.mp4 file လေးကို ထည့်ထားပါတယ်။ Modern browser အများစုမှာ ကြည့်လို့ရပါလိမ့်မယ်။ တကယ်လို့ video tag ကို support မလုပ်တဲ့ browser ဖြစ်ခဲ့ရင် Your browser does not support the video tag. ဆိုပြီး ဖော်ပြပါလိမ့်မယ်။

Figure 12-1

video tag မှာ controls ဆိုတာကတော့ play, pause စတဲ့ control တွေ ပါမယ်လို့ ဆိုလိုပါတယ်။

တကယ်လို့ browser တက်လာခြင်းမှာ video ကို play လုပ်စေချင်ရင်တော့ autoplay ဆိုတာကို ထည့်ထားနိုင်ပါတယ်။ သို့ပေမယ့် အသံပါသော media ကို user action မရှိဘဲ autoplay လုပ်တာကို browser အများစုက block လုပ်နိုင်ပါတယ်။ Autoplay လိုအပ်ရင် muted video အနေနဲ့ သုံးပါ။

<video src="movie.mp4" controls autoplay muted>

Insert an Audio File

Audio file ကို background music ပုံစံ အနေနဲ့ ထည့်သွင်းလို့ရသလို controls တွေကို ဖော်ပြထားပြီး user ကို play, pause လုပ်ခွင့်ပေးထားလို့လည်း ရပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>
  <h1>Music</h1>
  <audio src="music.mp3" controls>
    Your browser does not support the audio tag.
  </audio>
</body>
</html>

ဒီ code လေးမှာ controls ဆိုတာကို ထည့်ထားတဲ့ အတွက်ကြောင့် play,pause button တွေကို မြင်နေရပါလိမ့်မယ်။

background music အနေနဲ့ဆိုရင်

<audio src="music.mp3" controls>
    Your browser does not support the audio tag.
  </audio>

ဆိုပြီး အသုံးပြုနိုင်ပါတယ်။ အခုခေတ် browser တွေမှာ အသံကို user action မရှိဘဲ autoplay လုပ်တာကို block လုပ်နိုင်တဲ့အတွက် audio အတွက် controls ထည့်ပြီး user ကို play လုပ်ခွင့်ပေးတာ ပိုကောင်းပါတယ်။

Figure 12-2

Resize a Video

Video ရဲ့ အရွယ်အစားကို မူလ အရွယ်အစားမဟုတ်ပဲ ကျွန်တော်တို့တွေ width နှင့် height attribute ကို အသုံးပြုပြီး ပြောင်းနိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>
  <h1>Big Buck Bunny</h1>
  <video src="movie.mp4" controls width="400">
    Your browser does not support the video tag.
  </video>
</body>
</html>

ပုံမှန် video html code လေးပါပဲ။ ကျွန်တော်တို့ width ကို 400px ပေးထားတာကြောင့် browser မှာ 400px အရွယ်အစားဖြစ်နေပါလိမ့်မယ်။

Figure 12-3

height ကတော့ အလိုအလျောက် width ပေါ်မှာမူတည်ပြီး အရွယ်အစားကို ပြောင်းပေးပါလိမ့်မယ်။ တကယ်လို့ စိတ်ကြိုက် အရွယ်အစား ဆိုရင်တော့ height attribute ကို ထည့်နိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>
  <h1>Big Buck Bunny</h1>
  <video src="movie.mp4" controls width="400" height="400" style="background:black">
    Your browser does not support the video tag.
  </video>
</body>
</html>

ဒီ code မှာဆိုရင် video control မြင်ရအောင် CSS နဲ့ background ကို အမည်းရောင်ထည့်ထား ပါတယ်။ width နဲ့ height ကို 400 ပေးထားပါတယ်။

Figure 12-4

Preload Multimedia

Web page မှာ multimedia file တွေကို preload ခေါ်လို့ရပါတယ်။ preload ဆိုတာကတော့ browser ကို video/audio အတွက် ဘယ်လောက်အထိ ကြိုတင် load လုပ်စေချင်လဲ ဆိုတဲ့ hint ပေးတာပါ။ Browser က network condition နဲ့ user setting ပေါ်မူတည်ပြီး အဲဒီ hint ကို မလိုက်နာနိုင်ပါဘူး။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>  
  <h1>Big Buck Bunny</h1>
  <video src="movie.mp4" controls preload="metadata">
    Your browser does not support the video tag.
  </video>
</body>
</html>

preload="metadata" လေးထည့်ထားတာကို တွေ့ရပါလိမ့်မယ်။ ဒါကြောင့် browser က file တစ်ခုလုံးမဟုတ်ဘဲ duration, dimensions စတဲ့ metadata ကိုပဲ ကြိုတင် load လုပ်နိုင်ပါတယ်။ preload="auto" က data အသုံးများနိုင်တာကြောင့် video အများကြီးပါတဲ့ page တွေမှာ သတိထားသုံးသင့်ပါတယ်။

Loop Multimedia

loop attribute ဟာ <video> နဲ့ <audio> tag တွေကို ပြီးသွားတဲ့ အခါ အစကနေ ပြန်စချင်တဲ့ အခါမှာ အသုံးပြုပါတယ်။ ဥပမာ audio ဆိုရင် background music ဖွင့်ထားပြီးတော့ သီချင်းဆုံးတာနဲ့ အစက ပြန်စစေချင်ရင် အသုံးပြုနိုင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>
  <h1>Music</h1>
  <audio src="music.mp3" controls loop>
    Your browser does not support the audio tag.
  </audio>
</body>
</html>

ဒီ code ဟာ ဆိုရင် user က play လုပ်ပြီးနောက် သီချင်း ဆုံးသွားတာနဲ့ အစကနေ ပြန်စပါလိမ့်မယ်။

Offer Multiple Sources

ကျွန်တော်တို့တွေ အနေနဲ့ audio ၊ video တွေရဲ့ source ကို တစ်ခုထက် မက ထည့်လို့ရပါတယ်။ <video> မှာဆိုရင် .mp4, .webm စတာတွေကို တစ်ခါတည်း ထည့်ထားလို့ရပါတယ်။ Browser က ပထမ source နဲ့ ဖွင့်လို့ မရရင် နောက်ထပ် source တစ်ခုကို အလိုအလျောက် စမ်းဖွင့်ပေးပါလိမ့်မယ်။ Compatibility ကောင်းဖို့ MP4 ကို fallback အနေနဲ့ ထည့်ထားတာက အများဆုံး အသုံးဝင်ပါတယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>
</head>
<body>  
  <h1>Big Buck Bunny</h1>
  <video controls>
    <source src="movie.webm" type="video/webm">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</body>
</html>

ဒီ example မှာဆိုရင်တော့ ပုံမှန် video နဲ့ အတူူတူပါပဲ။ ကွာတာကတော့ source အသုံးပြုထားတာပါ။

<source> tag ရဲ့ src attribute မှာ ထည့်မယ့် video ရဲ့ file လမ်းကြောင်းကို ထည့်ရပါတယ်။ type ကတော့ video ရဲ့ MIME ပါ။ ဒီ code မှာ multiple source ကို အသုံးပြုထားပြီး webm နဲ့ mp4 ထည့်ထားတဲ့အတွက် browser က support လုပ်နိုင်တဲ့ format ကို ရွေးဖွင့်ပါလိမ့်မယ်။

Support Older Browsers

အရင်ခေတ်မှာ QuickTime, Flash, <object>, <embed> စတဲ့ plugin fallback နည်းတွေကို multimedia အတွက် အသုံးပြုခဲ့ကြပါတယ်။ အခုခေတ် browser တွေမှာတော့ plugin-based fallback ကို မသုံးသင့်တော့ပါဘူး။ Browser support အတွက် format မျိုးစုံကို <source> နဲ့ ထည့်ပြီး fallback text ကို <video> သို့မဟုတ် <audio> ထဲမှာ ရေးထားပါ။

<video controls width="640" poster="poster.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

တကယ်လို့ browser အဟောင်းတစ်ခုက <video> ကို support မလုပ်ဘူးဆိုရင် fallback text ကို ပြပါလိမ့်မယ်။ Production website တွေမှာတော့ analytics ကြည့်ပြီး support လုပ်ရမယ့် browser တွေကို ဆုံးဖြတ်ပါ။ အလွန်ဟောင်းတဲ့ browser တွေအတွက် plugin fallback ထည့်တာထက် downloadable link သို့မဟုတ် external video hosting ကို အသုံးပြုတာက ပိုလုံခြုံပြီး ပြုပြင်ထိန်းသိမ်းရလွယ်ပါတယ်။

Embed a YouTube Video

video တွေကို ကျွန်တော်တို့ရဲ့ website မှာ မထားချင်ဘူး။ youtube ပေါ်မှာ တင်ချင်တယ်။ ပြီးမှ website ထဲမှာ ထည့်သုံးချင်တယ် ဆိုရင် လွယ်လင့် တကူ အသုံးပြုနိုင်ပါတယ်။ ကိုယ့်ထည့်ချင်တဲ့ youtube video ဆီ သွားလိုက်ပါ။ Video အောက်မှာ share ဆိုတာ ပါပါတယ်။ share အောက်မှာ Embed ဆိုတာ ရှိပါတယ်။

Figure 12-6

အဲဒီ က code လေးကို copy ကူးပြီးတော့ ကျွန်တော်တို့ website ထဲမှာ ထည့်လိုက်ရုံပါပဲ။ အဲဒါဆိုရင် code လေးက ဒီလို မျိုး ဖြစ်ပါလိမ့်မယ်။

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Video</title>

</head>
<body>  
  <h1>Youtube</h1>
  
<iframe
  width="420"
  height="315"
  src="https://www.youtube.com/embed/tS4J-Ja9_F0"
  title="YouTube video player"
  style="border:0"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen>
</iframe>

</body>
</html>

ဒီ example မှာ https:// ကို အသုံးပြုထားပါတယ်။ frameborder attribute က obsolete ဖြစ်နေပြီဖြစ်တဲ့အတွက် border ဖျောက်ချင်ရင် CSS (style="border:0" သို့မဟုတ် stylesheet) ကို အသုံးပြုပါ။ loading="lazy" ကတော့ iframe ကို viewport နားရောက်မှ load လုပ်စေနိုင်တဲ့အတွက် page speed အတွက် အကူအညီဖြစ်နိုင်ပါတယ်။

Figure 12-7