תגיות שקשורות למדיה

מאמר זה מסביר על תגיות הקשורות למדיה.

מוסבר כיצד לתאר תמונות, סרטונים, שמע וכדומה ב-HTML, וגם אלמנטים מתקפלים ומסגרות מוטמעות.

YouTube Video

תגיות שקשורות למדיה

תגית <img>

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• תגית <img> משמשת להטמעת תמונות. המאפיין src מגדיר את נתיב התמונה, והמאפיין alt מספק תיאור כאשר לא ניתן להציג את התמונה.

תגיות <figure> ו-<figcaption>

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• תגית <figure> מקבצת תוכן מדיה כמו תמונות או איורים יחד עם כיתוב באמצעות תגית <figcaption>.

תגית <picture>

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• תגית <picture> משמשת לתמונות רספונסיביות, ומאפשרת לבחור את התמונה המתאימה לפי תנאי תצוגה שונים.

• המאפיין media מגדיר תנאים באותו פורמט כמו שאילתות מדיה של CSS.

  • ניתן להגדיר תנאים כמו רוחב מינימלי (min-width), רוחב מקסימלי (max-width) או כיוון המסך (orientation).

• בדוגמה זו מוצגות התמונות הבאות בהתאם לרוחב המסך.

  • אם רוחב המסך הוא 800px או יותר, large.jpg יוצג.
  • אם רוחב המסך הוא 400px או יותר אבל פחות מ־800px, medium.jpg יוצג.
  • אם רוחב המסך הוא פחות מ־400px, small.jpg (התמונה בתג <img>) יוצג.

תגית <canvas>

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• תגית <canvas> מספקת אזור שבו אפשר ליצור גרפיקה דינמית באמצעות JavaScript.

תגית <map>

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• תגית <map> משמשת להגדרת מפת תמונה. אזורים שניתן ללחוץ עליהם במפה מוגדרים באמצעות תגית <area>. באמצעות זאת ניתן להגדיר חלקים ספציפיים בתמונה שיהיו ניתנים ללחיצה ויובילו לקישור.
• ציין את שם אלמנט המפה המשויך (תג <map>) בתכונת usemap של תג <img>, מוקדם עם #.
• על ידי ציון נכון של תכונת alt בתג <area>, תוכל לשפר את הנגישות עבור משתמשים עם לקויות ראייה.

תגית <embed>

1<embed src="movie.mp4" width="300" height="200">

• תגית <embed> משמשת להטמעת תוכן חיצוני כמו קובצי PDF, סרטונים או שמע.

תגית <video>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• תגית <video> משמשת להטמעת תוכן וידאו. ניתן להגדיר פורמטים מרובים באמצעות תגית <source>.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• התכונה preload מאפשרת לציין כמה מהווידיאו יש לטעון על ידי הדפדפן לפני תחילת ההפעלה.
  • auto מנחה את הדפדפן לטעון מראש את כל קובץ המדיה. זה עשוי להפחית את העיכוב בתחילת הניגון, אך נתונים עשויים להיטען גם אם המשתמש אינו מנגן את המדיה.
  • metadata טוען רק את המטא-נתונים של המדיה (כגון משך זמן, מידע על רצועות). נתוני המדיה עצמם אינם נטענים עד שהמשתמש מתחיל בניגון. זה מתאים כאשר יש צורך במידע תמציתי על המדיה.
  • none אינו טוען את קובץ המדיה מראש. המדיה אינה מורידה משאבים עד לתחילת הניגון. זה מתאים כאשר רוצים למזער את השימוש בנתונים.

תגית <audio>

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• תגית <audio> משמשת להטמעת תוכן שמע. תגית <source> תומכת בפורמטים מרובים.
• כמו תג <video>, ניתן להשתמש בתכונה preload כדי לציין כמה מהשמע יש לטעון לפני תחילת הניגון.

תג <track>

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• תג <track> משמש לציון מסלולים טקסטואליים כמו כתוביות וכיתובים. ניתן להשתמש בו בתוך תגי <audio> או <video>.
• התכונה kind מאפשרת לציין את מטרת המסלול (כגון כתוביות, כיתובים, פרקים ועוד). ניתן לציין את הערכים הבאים.
  • subtitles מספק כתוביות שמתרגמות את תוכן הווידיאו או השמע או הופכות אותו להבנה קלה יותר לצופים. מטרתו העיקרית היא תרגום ישיר של השמע.
  • captions מספק מידע נוסף כמו מוזיקה ואפקטים קוליים לאנשים חרשים או כבדי שמיעה, בנוסף לשמע.
  • descriptions הם מסלולים שמתארים את התוכן הוויזואלי של הווידיאו, כמו פעולות ונופים, עבור אנשים עם לקות ראייה.
  • chapters מספקים סמני פרקים (כותרות פרקים) לציון נקודות ספציפיות בתוך הווידיאו.
  • metadata מספק מידע נוסף לעיבוד או ניתוח המדיה אך אינו מוצג למשתמשים.

תגית <iframe>

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• תגית <iframe> משמשת לשילוב דפים אחרים ב-HTML או תוכן חיצוני (כמו אתרים, סרטונים או מסמכים) בתוך הדף הנוכחי. לעיתים קרובות נעשה בה שימוש לשילוב סרטוני יוטיוב בדף.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video