Theory
તમારા Portfolio ને જીવંત કરવું
તમે યાદીઓ, tables, અને એક contact form સાથે એક સાફ portfolio ની website બનાવી છે. એ તમારો resume સુંદર રીતે દેખાડે છે. પણ જો તમારે તમારા semester ના project ને કામ કરતું દેખાડતો screen capture નો record કરેલો video દેખાડવો હોય તો? કે જો તમારે એક recruiter ને આવકારતો અવાજનો પરિચય વગાડવો હોય તો? જો તમે ખાલી સામાન્ય લખાણની links ટાઈપ કરો, તો user ને એ જોવા કે સાંભળવા તમારી site છોડવી પડે. તો આપણે સીધા તમારા layout માં સમૃદ્ધ audio અને video કેવી રીતે જડીએ જેથી એ જીવંત વાગે?
Theory
Television નું Set અને દીવાલનું Poster
સામાન્ય લખાણ અને images ને દીવાલ પરનાં posters જેવાં વિચારો: એ સ્થિર છે અને ક્યારેય બદલાતાં નથી. Media elements ઉમેરવાં એટલે એ દીવાલમાં એક કાણું પાડીને એક interactive television ની screen લગાવવી. આ screen માત્ર એક સ્થિર ચિત્ર દેખાડતી નથી, એની સાથે એક જડેલું playback નું deck, અવાજની સ્લાઈડરો, વગાડવાનાં બટન, અને આંતરિક ઘટકો આવે છે જે સીધા એક સંગ્રહના folder માંથી video ની ફ્રેમો કે audio ના પાટા લાવે છે, આ બધું તમારી સ્થિર poster ની ફ્રેમની અંદર જ ચાલતાં.
Theory
HTML5 Multimedia નું માળખું
આધુનિક web engineering માં, multimedia elements બહારના browser ના plugins ની જરૂર વગર audio અને video ની files નું મૂળ playback શક્ય બનાવે છે. <video> tag હાલતું દૃશ્ય media જડે છે, જ્યારે <audio> tag અવાજની clips જડે છે. બંને elements એવાં ડબ્બાનાં tags છે જે નિયંત્રણનાં attributes સ્વીકારે છે અને વૈકલ્પિક source ના વિકલ્પો ઘેરે છે. બહારની સ્વતંત્ર સામગ્રી કે જૂનાં સ્વરૂપો જડવા, HTML લવચીક <embed> tag અને YouTube જેવી web ની સેવાઓ માટે standard <iframe> વીંટાળનારાં આપે છે.
At a glance
Multimedia ના playback અને જડવા માટે વપરાતાં મુખ્ય HTML elements.
| Tag નું નામ | મુખ્ય Attributes | શ્રેષ્ઠ Use Case |
|---|---|---|
| <video> | src, controls, autoplay, loop, width | સ્થાનિક video ની clips કે project ના screencasts વગાડવા. |
| <audio> | src, controls, loop, preload | અવાજની નોંધો, પશ્ચાદભૂમિનું સંગીત, કે audio નાં અભિવાદન વગાડવાં. |
| <embed> | src, type, width, height | PDF documents જેવા બહારના સંસાધનના પ્રકારો જોડવા. |
| <iframe> | src, width, height, allowfullscreen | YouTube જેવા ત્રીજા પક્ષના platforms પર host થયેલા videos વહાવવા. |
Practical
Embedding a Local Project Video and a YouTube Feed
<body>
<h2>Project Demo Reel</h2>
<video width="400" controls>
<source src="project-demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>Featured Presentation</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/example" allowfullscreen></iframe>
</body>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
તમે તમારા portfolio ના પાનામાં એક <audio src="intro.mp3"> tag ઉમેરો છો. જ્યારે તમે webpage એક browser માં ખોલો, audio નું player સંપૂર્ણપણે અદૃશ્ય છે અને કોઈ અવાજ વાગતો નથી. સૌથી સંભવિત કારણ શું છે?
- Audio tag ને screen પર દેખાવા એક iframe ના વીંટાળનારની જરૂર છે
- તમે audio tag ની અંદર controls attribute સામેલ કરવાનું ભૂલી ગયા
- Audio ની files માત્ર ત્યારે વાગી શકે જ્યારે એ head element ની અંદર જાહેર થાય
- Standard HTML5 engines mp3 ના સ્વરૂપને મૂળભૂત રીતે support કરતાં નથી
Show the answer
તમે audio tag ની અંદર controls attribute સામેલ કરવાનું ભૂલી ગયા
Default રીતે, <video> અને <audio> બંને elements છુપાયેલાં હોય છે કે એમને સંપૂર્ણપણે કોઈ interface હોતું નથી સિવાય કે તમે સ્પષ્ટપણે controls attribute સામેલ કરો. એના વગર, player શૂન્ય પહોળાઈ અને ઊંચાઈ સાથે દોરાય છે, user ને playback શરૂ કરવા કોઈ બટન વગર છોડતાં.
Think first
Streaming Embeds સામે સ્થાનિક Video Tags નું મૂલ્યાંકન
કલ્પો કે તમારા છેલ્લા વર્ષના project નો video એક વિશાળ 2 gigabyte ની file છે. શું તમારે આ file સીધી તમારા સ્થાનિક hosting ના server પર <video> tag વાપરીને host કરવી જોઈએ, કે એને YouTube પર ચઢાવીને એક <iframe> નું embed વાપરવું જોઈએ? Tap કરતાં પહેલાં server પરના બોજ અને network ની મર્યાદા વિશે વિચારો.
Show the answer
તમારે એને YouTube પર ચઢાવીને એક <iframe> નું embed વાપરવું જોઈએ. વિશાળ media ની files તમારા personal web hosting નું bandwidth ઝડપથી ખાઈ જાય છે, તમારા મુલાકાતીઓ માટે load થવાનો ધીમો સમય કરતાં. YouTube આપોઆપ video ની file સંકોચે છે અને ભારે streaming નું bandwidth સંભાળે છે, તમારી મુખ્ય portfolio ની site ને હલકી અને ઝડપી રાખતાં.
Watch out
ખાલી Player નો ખાડો
University ની વ્યવહારુ પરીક્ષાઓમાં એક classic ભૂલ છે કોઈ બાળક tags કે પાછળ પડવાનાં વર્ણનો વગર <video src="demo.mp4"> લખવું. જો કોઈ મુલાકાતીનું browser એ ચોક્કસ video ના ડબ્બાનું સ્વરૂપ ઉકેલવામાં નિષ્ફળ જાય, media નો વિસ્તાર સંપૂર્ણપણે તૂટેલા કોરા block તરીકે દોરાય છે. મહત્તમ marks પાકા કરવા, હંમેશા વૈકલ્પિક સ્વરૂપો આપવા nested <source> tag નું માળખું વાપરો, અને પછી જૂનાં browsers માટે એક સાદા લખાણનો backup સંદેશો મૂકો.
Formula
Exam ના જવાબની રીત: Multimedia નું જોડાણ
જ્યારે એક theory નો પ્રશ્ન તમને HTML5 નું media સંભાળવાનું સમજાવવાનું કહે, પૂરા marks માટે તમારો જવાબ આ પગલાં સાથે ગોઠવો:
- 1. ભેદ પાડો:
<video>કે<audio>વાપરીને મૂળ streaming સામે<iframe>વાપરીને platform નું જડવું સમજાવો. - 2. નિયંત્રણનાં attributes:
controls,width,height, અનેautoplayસહિતના મુખ્ય નિયંત્રણના parameters સ્પષ્ટપણે નિર્દિષ્ટ કરો. - 3. પાછળ પડવાની logic: જૂનાં browsers ને સુઘડ રીતે સંભાળવા tag ના ડબ્બાની અંદર એક સાદા લખાણના ચેતવણીના સંદેશા સાથે એક nested
<source>ની વ્યવસ્થા આપો.
Summary
Key takeaways
<video>tag મૂળ video ના પ્રવાહ સંભાળે છે અને screen ખસી ન જાય એ માટે layout ના પરિમાણની સીમાઓ માંગે છે.<audio>tag ભારે ત્રીજા પક્ષના plug-ins ની જરૂર વગર મૂળ અવાજના playback નાં નિયંત્રણો રજૂ કરે છે.- Web ના users ને play, pause, અવાજ, અને tracking નાં વર્તન ખુલ્લાં કરવા controls attribute ફરજિયાત છે.
- embed અને iframe elements તમને બહારના સંસાધનો અને YouTube જેવી ત્રીજા પક્ષની streaming ની સેવાઓ ચઢાવવા દે છે.
- Nested source નાં બાળક tags તમને browsers પર મહત્તમ સલામતી માટે અનેક media નાં સ્વરૂપો જાહેર કરવા દે છે.
- Memory Hook: Controls deck દેખાડે છે, source પાટો સંભાળે છે, frames પાછળ જોયા વગર બહારથી જડે છે.