שילוב וידאו ואודיו ב-HTML
עד עידן HTML5, שילוב של קבצי וידאו לצפיה בסרטונים ושל קבצי אודיו לשמיעת קטע קול, נעשו באמצעות תוספים חיצוניים שהיה נדרש להתקינם על הדפדפן. הדבר יצר בעיות תאימות שונות, בעיות בקידודים ובאופן התצוגה בין דפדפנים שונים או במכשירים שונים.
HTML5 מאפשרת תמיכה מובנית של סרטוני וידאו וקטעי אודיו ישירות בקוד, באמצעות תגיות מובנות וללא כל שימוש בתוספים לדפדפן.
איך להטמיע סרטוני וידאו באמצעות תגית video
נראה דוגמה פשוטה להטמעה של סרטון וידאו על ידי תגית video.
<video src="video.mp4" controls="true" poster="thumbnail.webp"></video>
המאפיין src מצביע על הסרטון שאותו מציגים. נשים לב כי הקישור הוא ישירות לקובץ הסרטון ולא קישור לעמוד כלשהו באתר חיצוני (כגון קישור ליוטיוב).
המאפיין controls, אם הוא קיים, יגרום לתצוגה של לוח בקרה עם אפשרויות שונות על הסרטון, כגון: הפעלה, עצירה וכיו"ב. נשים לב שזה לא ממש משנה מה הערך של המאפיין controls והוא יכול להיות אפילו false. מספיק שהערך קיים כדי לגרום לתצוגה של לוח הבקרה.
המאפיין poster מאפשר הצגה של תמונה לתצוגה מוקדמת, אשר תוצג במהלך טעינת הסרטון ועד רגע הפעלתו.
ניתן לשלב הודעת שגיאה למקרה שטעינת הסרטון נכשלת.
דוגמה:
<video src="video.mp4" controls="true" poster="thumbnail.jpg">
Your browser does not support the video tag.
</video>
מאפיינים נוספים שניתן להשתמש בהם:
muted - השתקת הצליל בסרטון
loop - הפעלת הסרטון בצורה מחזורית
autoplay - הפעלה מיידית של הסרטון עם רגע טעינתו (ללא צורך הקלקה על כפתור ההפעלה)
כמו controls, מאפיינים אלו הם בוליאניים. כלומר, מספיק שהם מופיעים בתגית video כדי שיופעלו, ואין זה משנה מה הערך שנקבע להם.
איך להטמיע קטעי אודיו באמצעות תגית audio
נראה דוגמה פשוטה להפעלת קובץ אודיו באמצעות תגית audio.
<audio src="audio.mp3" controls="true"></audio>
כמו בתגית video, גם כאן יטען הקובץ שמופיע במאפיין src, ולוח הבקרה יוצג בגלל המאפיין controls.
גם כאן ניתן לשלב הודעת שגיאה למקרה שטעינת קובץ האודיו נכשלת.
דוגמה:
<audio src="audio.mp3" controls="true">
Your browser does not support the audio tag.
</audio>
גם בתגית audio ניתן להשתמש במאפיינים muted, loop, autoplay כמו בתגית video.
