תיעוד HTML עם דוגמאות להרצה: תגית video

Q: איך מוסיפים וידאו ב-HTML?

השתמשו ב- . המאפיין controls מציג את כפתור הניגון, ציר הזמן ועוצמת השמע של הדפדפן. בלעדיו הווידאו מציג את הפריים הראשון שלו (או את ה-poster) והמשתמש לא יכול להפעיל אותו.

Q: למה ה-autoplay לא עובד בווידאו שלי?

דפדפנים חוסמים ניגון אוטומטי עם קול. הוסיפו muted ליד autoplay, ו-playsinline כדי שמכשירי iPhone ינגנו אותו בתוך העמוד ולא במסך מלא: .

Q: איך מוסיפים תמונה ממוזערת לווידאו?

השתמשו במאפיין poster עם כתובת URL של תמונה: . התמונה מוצגת עד שהווידאו מתחיל להתנגן.

Q: איך מוסיפים כתוביות לווידאו ב-HTML?

הוסיפו בתוך הווידאו. הקובץ משתמש בפורמט WebVTT, והדפדפן מציג כפתור כתוביות בפקדים שלו.

Q: איך הופכים וידאו לרספונסיבי?

הגדירו width: 100% ו-height: auto ב-CSS (או max-width: 100%). הווידאו משנה את גודלו יחד עם המכל שלו ושומר על יחס הממדים.

איך מוסיפים וידאו

הפנו את האלמנט <video> לקובץ וידאו והוסיפו controls כדי שהקורא יוכל לנגן אותו:

<video src="movie.mp4" controls width="640"></video>

controls מציג את הנגן המובנה של הדפדפן: ניגון והשהיה, ציר זמן, עוצמת שמע ומסך מלא. בלעדיו הווידאו פשוט עומד במקום. התצוגה המקדימה הזו לא יכולה לטעון קובצי וידאו, ולכן הדוגמאות בעמוד הזה מזינות את האלמנט מאנימציית canvas קטנה שסקריפט מצייר; המאפיינים עובדים בדיוק כמו עם קובץ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

מכיוון שהמקור הוא שידור חי ולא קובץ, כאן אי אפשר לגרור את ציר הזמן ואין אורך קבוע. עם קובץ .mp4 אמיתי, אותו נגן מקבל פס התקדמות מלא.

מאפייני video

מאפיין	מה הוא עושה
`controls`	מציג את פקדי הנגן של הדפדפן
`autoplay`	מתחיל לנגן ברגע שאפשר (בפועל, רק עם `muted`)
`muted`	מתחיל כשהקול כבוי
`loop`	מתחיל שוב מההתחלה כשהוא מסתיים
`playsinline`	מתנגן בתוך העמוד ב-iPhone במקום לעבור למסך מלא
`poster="thumb.jpg"`	תמונה שמוצגת לפני שהווידאו מתנגן
`preload`	`none`, `metadata` (רק גודל ואורך) או `auto` (הדפדפן מחליט כמה להוריד)
`width`, `height`	גודל בפיקסלים; הגדרת שניהם שומרת מקום לפני שהווידאו נטען

autoplay, muted ו-loop

דפדפנים חוסמים סרטונים שמתחילים לבד עם קול. וידאו מושתק רשאי להתנגן אוטומטית, וכך עובדים סרטוני רקע וקליפים קצרים בלולאה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

ארבעת המאפיינים עובדים יחד: autoplay כדי להתחיל, muted כדי שהדפדפן יאפשר זאת, loop לקליפ, ו-playsinline כדי שמכשירי iPhone לא יפתחו אותו במסך מלא. וידאו עם קול שמתנגן לבד לא רק נחסם, הוא גם בעיה למשתמשי קוראי מסך, שהדיבור שלהם נבלע בו. אם קליפ מתנגן יותר מחמש שניות, תנו לאנשים דרך לעצור אותו.

תמונת poster ו-preload

poster מציג תמונה לפני שהווידאו מתנגן, כמו תמונה ממוזערת. כאן לווידאו אין מקור בכלל, ולכן ה-poster הוא כל מה שרואים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

עם preload="none" הדפדפן לא מוריד כלום עד שהקורא לוחץ על ניגון, וה-poster מונע מהשטח להיראות ריק. השתמשו ב-preload="metadata" כשאתם רוצים שהאורך ייראה לפני הניגון. בלי poster, רוב הדפדפנים מציגים את הפריים הראשון ברגע שטענו אותו.

פורמטים וחלופות עם source

במקום src, אפשר לרשום כמה קבצים עם אלמנטים של <source>. הדפדפן מנגן את הראשון שהוא תומך בו:

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

MP4 עם וידאו H.264 מתנגן בכל הדפדפנים הנוכחיים, ולכן זו הבחירה הבטוחה כשיש לכם קובץ אחד בלבד. המאפיין type מאפשר לדפדפן לדלג על פורמטים שהוא לא יכול לנגן בלי להוריד אותם. הטקסט בסוף מוצג רק בדפדפנים שלא תומכים ב-<video> בכלל.

כתוביות עם track

<track kind="captions"> טוען קובץ WebVTT, קובץ טקסט פשוט של שורות מתוזמנות. הדפדפן מוסיף כפתור כתוביות לפקדים שלו ומצייר את הטקסט מעל הווידאו:

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

כתוביות עוזרות לצופים חירשים וכבדי שמיעה, לאנשים שצופים בלי קול ולכל מי שעוקב אחרי וידאו בשפה שנייה. הוסיפו default ל-track כדי להציג אותו בלי לחיצה. קובץ כתוביות מדומיין אחר צריך כותרות CORS ו-crossorigin על הווידאו.

עיצוב ושליטה עם JavaScript

וידאו הוא אלמנט מוחלף (replaced element), כמו תמונה: width: 100% עם height: auto הופך אותו לרספונסיבי, ו-object-fit קובע איך הוא ממלא תיבה בצורה אחרת. ל-JavaScript יש play(), pause(), currentTime, volume ואירועים כמו play, pause ו-ended:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() מחזירה promise שנדחה כשהדפדפן חוסם את הניגון (למשל, autoplay בלי השתקה), ולכן קוד בסביבת production צריך לתפוס אותו עם catch. בניית פקדים משלכם היא אופציונלית; ה-controls המובנים נגישים במקלדת ומתורגמים, ואת זה כפתורים מותאמים אישית צריכים לשחזר. לסרטונים שמאוחסנים ב-YouTube או ב-Vimeo, מטמיעים במקום זאת את הנגן שלהם עם iframe.

טעויות נפוצות

autoplay בלי muted. הדפדפן חוסם אותו. הוסיפו muted ו-playsinline.
לשכוח את controls. אם לא בניתם פקדים משלכם, לקורא אין שום דרך להפעיל את הווידאו.
בלי width ו-height. העמוד קופץ כשהווידאו נטען. הגדירו את שניהם, ואז שנו גודל עם CSS.
קבצים ענקיים. דחסו סרטונים לאתר והשתמשו ב-preload="none" או "metadata" לסרטונים שנמצאים נמוך יותר בעמוד.
אין כתוביות בסרטונים עם דיבור. הוסיפו <track kind="captions">.

שאלות נפוצות

איך מוסיפים וידאו ב-HTML?

השתמשו ב-<video src="movie.mp4" controls width="640"></video>. המאפיין controls מציג את כפתור הניגון, ציר הזמן ועוצמת השמע של הדפדפן. בלעדיו הווידאו מציג את הפריים הראשון שלו (או את ה-poster) והמשתמש לא יכול להפעיל אותו.

למה ה-autoplay לא עובד בווידאו שלי?

דפדפנים חוסמים ניגון אוטומטי עם קול. הוסיפו muted ליד autoplay, ו-playsinline כדי שמכשירי iPhone ינגנו אותו בתוך העמוד ולא במסך מלא: <video autoplay muted loop playsinline>.

באיזה פורמט וידאו כדאי להשתמש באתר?

MP4 עם וידאו H.264 מתנגן בכל הדפדפנים הנוכחיים, ולכן זו ברירת המחדל הבטוחה. אפשר לרשום קודם קובץ WebM קטן יותר עם <source> ולתת לדפדפן לבחור את הפורמט הראשון שהוא תומך בו.

איך מוסיפים תמונה ממוזערת לווידאו?

השתמשו במאפיין poster עם כתובת URL של תמונה: <video poster="thumb.jpg" controls>. התמונה מוצגת עד שהווידאו מתחיל להתנגן.

איך מוסיפים כתוביות לווידאו ב-HTML?

הוסיפו <track kind="captions" src="captions.vtt" srclang="he" label="עברית"> בתוך הווידאו. הקובץ משתמש בפורמט WebVTT, והדפדפן מציג כפתור כתוביות בפקדים שלו.

איך הופכים וידאו לרספונסיבי?

הגדירו width: 100% ו-height: auto ב-CSS (או max-width: 100%). הווידאו משנה את גודלו יחד עם המכל שלו ושומר על יחס הממדים.

מושגים קשורים