תגית Video ב-HTML5 היא אולי התגית המדוברת ביותר בתקן החדש. זה לא ממש הוגן, כיוון שיש כל כך הרבה תכונות מעניינות ב-HTML5, אבל היכולת להכניס וידאו באופן קל ופשוט לאתר אינטרנט היא אפשרות נעימה מאד לכל מי שיצא לו להסתבך עם נגני פלאש.
הבעיה היא שנכון לכתיבת מאמר זה, יש חוסר הסכמה על נושא הקידוד. אינטרנט אקספלורר 9, ספארי וכרום תומכות בקבצי MP4 בקידוד H.264. פיירפוקס ואופרה בגרסת חלונות תומכות בפורמטים אחרים (ביניהן אפשר למנות את VP8 ואת ogg). למרות שמסתמן שבסופו של דבר פיירפוקס יתמוך ב-MP4, בשלב זה אנחנו צריכים לקודד את הוידאו שלנו בשני אופנים – MP4 ו-ogg.
חמושים בתובנה המתבקשת בנוגע לקידוד, בואו וניצור וידאו! הנה דוגמא פשוטה מאד:
תעבור לפיירפוקס/כרום/אופרה/אינטרנט אקספלורר 9 אם אתה רוצה לראות את התוכן הזה
ואיך הפלא הקטן הזה קורה? באמצעות הקוד המאד פשוט הבא:
<video controls="controls" width="500">
<!-- if Firefox/Chrome -->
<source src="movie.ogg" type="video/ogg" />
<!-- if Safari-->
<source src="movie.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the video -->
<p>תעבור לפיירפוקס/כרום/אופרה/אינטרנט אקספלורר 9 אם אתה רוצה לראות את התוכן הזה</p>
</video>
כמובן שלא חייבים לשים הערה מעליבה לאלו שיש להם אינטרנט אקספלורר שקודם ל-9, אפשר לשים להם נגן פלאש שמנגן קובץ flv – נסו לפתוח את הדף הזה באמצעות אקספלורר מגרסה 8 ומטה:
למי שלא יודע איך להכין נגן פלאש אפשר להשתמש בפתרונות מוכנים או להעזר במדריך להכנת נגן פלאש. הקוד נראה כך:
<video controls="controls" width="500">
<!-- if Firefox/Chrome -->
<source src="movie.ogg" type="video/ogg" />
<!-- if Safari-->
<source src="movie.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the video -->
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="300"
height="255"
align="middle"
id="main">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="fplayer.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="skin=fskin.swf&flv=movie.flv" />
<embed src="fplayer.swf"
width="300"
height="255"
autostart="false"
quality="high"
bgcolor="#ffffff"
FlashVars="skin=fskin.swf&flv=movie.flv"
name="main"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</video>
תכונות של תגית וידאו
לתגית וידאו יש מספר תכונות שבאמצעותן אפשר לקבוע כל מני דברים.
video controls=video controls
באמצעות תכונה זו אנו יכולים לקבוע שיהיו בקרים (כפתור play וכפתור ווליום למשל).
audio=muted
באמצעות תכונה זו אנו יכולים לקבוע שהווליום הדיפולטיבי יהיה מושתק. המשתמש יוכל להרים את הווליום בכל שלב שהוא.
autoplay=autoplay
באמצעות תכונה זו אנו יכולים לקבוע שהוידאו יתחיל להתנגן ברגע שהוא יעלה ולא צריך לחכות ללחיצה של משתמש.
loop=loop
אנו קובעים באמצעות תכונה זו שהוידאו יתחיל להתנגן מחדש ברגע שהוא נגמר.
preload=preload
טעינה מראש של הסרט, עוד לפני שהמשתמש לחץ על play. כמובן שהתגית הזו לא רלוונטית אם אנו משתמשים ב-autoplay
width & height
באמצעות תכונות אלו אנו יכולים לקבוע את הגובה והרוחב של הוידאו. אפשר ואף רצוי להשתמש ב-CSS בשביל זה.
זה הכל בכל מה שנוגע לוידאו ב-HTML5 שיכול לעבוד בכל מקום – פשוט, לא?
אהבתם? לא אהבתם? דרגו!
(אין הצבעות)
כותב כל המאמרים באינטרנט ישראל, מפתח אינטרנט מנוסה במגוון שפות ופלטפורמות.
תשארו בקשר!