Media: Video, Audio

📖 Theory

એ promo ની clip જે કશું વગાડતી નથી

તમારી પાસે 20 સેકન્ડની FestConnect ની promo video છે. તમે એને <video src="promo.mp4"></video> થી મૂકો છો, refresh કરો છો, અને કોરો લંબચોરસ દેખાય છે. File બરાબર છે, રસ્તો સાચો છે, પણ play નું બટન નથી, કશું જ નથી.

HTML5 કોઈ પણ plugin વગર video અને audio વગાડી શકે છે, પણ player ત્યારે જ દેખાય છે જ્યારે તમે માંગો. Clip વહન કરતું tag અને નિયંત્રણો દેખાડતું attribute એ બે અલગ નિર્ણય છે.

📖 Theory

જેનું remote લઈ લેવાયું હોય એવું TV

controls વગરનું <video> એ દીવાલમાં જડેલા બંધ TV જેવું છે: ચિત્ર ત્યાં છે, પણ મુલાકાતી પાસે દબાવવા માટે એકેય બટન નથી. controls ઉમેરવાથી એમના હાથમાં remote આવે છે: play, pause, આગળ-પાછળ, અવાજ. મોટા ભાગનાં પાનાં માટે તમને remote દેખાય એ જ જોઈએ, એટલે controls એ પહેલું attribute છે જેની તરફ તમે હાથ લંબાવો છો.

📖 Theory

બે tags અને એમનાં મુખ્ય attributes

• `<video>` અને `<audio>` clip ને મૂળભૂત રીતે જ જડે છે.
• controls: play/pause/અવાજ ની પટ્ટી દેખાડે છે. સામાન્ય રીતે આવશ્યક.
• src કે અંદરનાં `<source>` tags: file કે files. અનેક <source> સંતાનો browser ને એ પ્રકાર પસંદ કરવા દે છે જેને એ ટેકો આપે છે.
• autoplay, loop, muted: load થતાં શરૂ, ફરી ફરી, અવાજ વગર શરૂ.
• poster (ફક્ત video): વગાડતાં પહેલાં દેખાતું પૂર્વદર્શનનું ચિત્ર.

ખૂલતા અને બંધ થતા tag ની વચ્ચે મૂકેલું લખાણ એ બદલી નો સંદેશો છે એવાં browsers માટે જે એને વગાડી શકતાં નથી.

⌨️ Practical

FestConnect ની promo video અને audio

<video controls width="600" poster="images/promo-cover.jpg">
  <source src="media/promo.mp4" type="video/mp4">
  <source src="media/promo.webm" type="video/webm">
  Your browser cannot play this video.
</video>

<audio controls>
  <source src="media/announcement.mp3" type="audio/mpeg">
  Your browser cannot play this audio.
</audio>

<!-- To autostart, browsers require it be silent: -->
<!-- <video autoplay muted loop> ... </video> -->

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

બે <source> tags કેમ?

Video એ promo.mp4 અને promo.webm બંને આપે છે. એક જ clip માટે એકને બદલે બે files કેમ યાદીમાં મૂકવી? Browser એમનું શું કરે છે? પહેલાં વિચારો.

🧩 Quiz

તમે promo માટે `<video autoplay>` ઉમેરો છો, પણ મોટા ભાગના phones પર એ આપોઆપ શરૂ થવાની ના પાડે છે. Browsers ખરેખર જે માંગે છે એ ઉકેલ કયો છે?

1. muted attribute ઉમેરો: browsers અવાજ સાથેના autoplay ને રોકે છે
2. controls કાઢી નાખો જેથી autoplay સંભાળી લે
3. File ને mp4 થી બદલીને mp3 કરો
4. loop ઉમેરો, જે autoplay ને શરૂ થવા ફરજ પાડે છે

⚠️ Watch out

Media ના ફાંદા

• અદૃશ્ય player: controls નહીં અને autoplay નહીં એટલે વાપરનારને click કરવા જેવું કશું દેખાતું નથી. જો પ્રશ્નમાં ફક્ત src વાળું <video> દેખાડીને પુછાય કે 'વાપરનારને શું દેખાય છે?', તો જવાબ છે બટન વગરની ચોકઠી.

• Autoplay ને muted જોઈએ: એવો દાવો ક્યારેય ન કરો કે એકલું autoplay load થતાં અવાજ સાથે વાગે છે.

• Media માટે ખોટું tag: અવાજ માટે <audio>, હાલતાં ચિત્રો માટે <video>. અને બદલીનું લખાણ tags ની વચ્ચે મૂકો, attribute માં નહીં.

📖 Theory

કોરા tag થી શણગારેલા card સુધી

આ મૂળભૂત player કામનું છે પણ સાદું છે. Unit 2 માં Bootstrap ના media object અને card ના ઘટકો video કે thumbnail ને મથાળા અને બાજુના લખાણ સાથે સુઘડ ગોઠવણમાં વીંટે છે, બરાબર એ જ જે FestConnect ના event ના card ને જોઈએ. <video>/<audio> tag એ જ રહે છે; Bootstrap ફક્ત એની આસપાસની પેટીને શણગારે છે.

✅ Summary

Key takeaways

• <video> અને <audio> clips ને મૂળભૂત રીતે જ જડે છે, કોઈ plugin જોઈતું નથી.
• play/pause ની પટ્ટી દેખાડવા controls ઉમેરો; એના વગર (અને autoplay વગર) કશું દેખાતું નથી.
• અનેક <source> સંતાનો અનેક પ્રકાર આપે છે; browser પહેલો ટેકો આપતો પ્રકાર વગાડે છે (mp4 એ સલામત video નું મૂળભૂત, audio માટે mp3).
• અવાજ સાથે autoplay રોકાય છે: આપોઆપ શરૂ કરવા એને muted સાથે જોડો.
• Tags વચ્ચેનું લખાણ એ ન વગાડી શકતાં browsers માટેની બદલી છે; poster એ video નું પૂર્વદર્શનનું ચિત્ર ગોઠવે છે.
• Memory hook: controls નહીં, તો remote નહીં.