בראשון הבלוגים שלו עבור PC Pro , מפתח אינטרנט איאן דוולין מגלה כיצד להטמיע וידאו באתר שלך באמצעות HTML5
כיצד לגלות כמה מנויים יש לערוץ עווית
כנראה שהתכונה הגדולה והמדוברת ביותר של HTML5 היא וידאו משובץ. נכון לעכשיו, השיטה היחידה להוסיף תוכן וידאו לאתר שלך היא באמצעות תוסף צד שלישי כגון Flash, QuickTime או RealPlayer. עם עלות השחר של HTML5 ואלמנט הווידאו, כל זה ישתנה, כאשר תמיכת הווידאו תטופל על ידי דפדפן האינטרנט ותמנע את הצורך בכל תמיכה מצד שלישי.
כמה דפדפני אינטרנט כבר מציעים תמיכה ב- HTML5. כאן אנו חושפים כיצד תוכלו להטמיע באתרכם סרטונים ללא תוספים ואת הבעיות שתעמדו בפניכם.
סוגי קבצים ותאימות דפדפן
ראשית, נבחן בקצרה את סוגי קבצי הווידאו השונים הנתמכים ב- HTML5. אלה הם Theora OGG ו- H.264 (.mp4). דפדפנים שונים תומכים בסוגים שונים, וחלקם אינם תומכים כלל. הטבלה הבאה מציינת זאת:
| תיאורה OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | איקס |
| Chrome 3+ | ✓ | ✓ |
| ספארי 3+ | איקס | ✓ |
| אופרה 10.5+ | ✓ | איקס |
| Internet Explorer 8 | איקס | איקס |
| Internet Explorer 9 | איקס | ✓ |
| אייפון | איקס | ✓ |
| דְמוּי אָדָם | איקס | ✓ |
קודקים ובעיות טכניות אחרות
HTML5 עצמו אינו מציין קודק וידאו לשימוש, והדבר הוביל לוויכוחים לגביו הטוב ביותר לשימוש באינטרנט . אז כדי לכסות את כל הדפדפנים, עלינו לתמוך בשני ה- codec.
ואז כמובן יש את Internet Explorer. נכון לעכשיו, אף אחת מהגרסאות המשוחררות של Internet Explorer אינן תומכות באלמנט הווידיאו ותוסף עדיין נדרש להפעלת וידיאו. זה ישתנה עם יציאתו של Internet Explorer 9 (ככל הנראה בתחילת השנה הבאה), כאשר תומך ב- H.264, יחד עם רבים וטובים אחרים של HTML5.
במקרה שאתה תוהה כיצד, תוכל להמיר את קבצי הווידאו שלך ל- OGG (תוכל לקרוא עוד על סוג Theora OGG באתר TheoraCookbook ) קבצים באמצעות ממיר וידאו מירו .
למידע מעמיק נוסף על אלמנט הווידיאו והקודקים, עברו אל ה- לצלול לתוך html5: וידאו באינטרנט מאת מארק פילגרים.
קוד HTML5
כעת אנו עוברים לקוד ה- HTML5 בפועל וכיצד נוכל לגרום לכך שהדבר יעבוד. HTML5 מספק לנו שני אלמנטים חדשים שבהם נוכל להשתמש כדי להוסיף וידאו לדפי האינטרנט שלנו: אלמנט, שכבר הזכרנו, ואת אֵלֵמֶנט. בואו נסתכל על כל אחד מאלה בתורו.
האלמנט
רכיב הווידאו יכול לכלול את התכונות הבאות:
| תְכוּנָה | תיאור |
|---|---|
| src | כתובת אתר תקפה לקובץ הווידיאו עצמו |
| הפעלה אוטומטית | בוליאני המציין אם יש להפעיל את הסרטון באופן אוטומטי |
| פקדים | בוליאני המציין כי פקדי המדיה המוגדרים כברירת מחדל צריכים להיות מוצגים על ידי הדפדפן |
| לוּלָאָה | בוליאני המציין אם יש להפעיל את הסרטון שוב ושוב |
| טען מראש | מציין לדפדפן אם נדרשת הורדה מונעת של הסרטון עצמו, או שמא מטה-נתונים בלבד הם כל הדרוש. ערכים אפשריים הם:
|
| פּוֹסטֵר | כתובת ה- URL לקובץ תמונה שתוצג כשאין נתוני וידאו זמינים |
| רוֹחַב | רוחב הסרטון, בפיקסלים של CSS |
| גוֹבַה | גובה הסרטון, בפיקסלים של CSS |
מכאן, ניתן לראות כמה קל להטמיע סרטון OGG לאתר שלך באמצעות רכיב הווידיאו בלבד:
זה באמת כל מה שיש בזה.
כל דפדפן התומך בפורמט ה- OGG של Theora אמור כעת להציג ולהפעיל את הסרטון שלך בהצלחה ללא התייחסות נוספת. כמובן שזה לא קל כמו זה, כי כפי שראינו מהטבלה לעיל, הקוד יעבוד רק ב- Firefox, Chrome ו- Opera. אז אנחנו צריכים להיות נסיגה גם ל- H.264. ניתן להשיג זאת באמצעות אלמנט, המאפשר לנו להגדיר מקורות מדיה מרובים עבור אלמנט הווידיאו.
כיצד להסיר את הגנת הכתיבה בכונן USB - -
האלמנט
לאלמנט המקור יש את התכונות הבאות:
| תְכוּנָה | תיאור |
|---|---|
| src | כתובת URL תקפה לקובץ המדיה (במקרה זה וידאו) עצמו |
| סוּג | סוג קובץ המדיה שחייב להיות a סוג MIME , למשל type='video/ogg' מציין כי מדובר בסרטון Theora OGG, ותוכלו גם לספק את ה- MIME codec שיעזור לדפדפן להחליט כיצד להפעיל את הסרטון באמצעות type='video/ogg; codecs='theora, vorbis' |
| חֲצִי | נותן את סוג המדיה המיועד של משאב המדיה ועליו להיות תקף שאילתת מדיה , למשל media='handheld' מציין שהסרטון מתאים למכשירי כף יד או media='all and (min-device-height:720px)' מה שמעיד על כך שהסרטון מתאים למסכים של 720 פיקסלים ומעלה. |
הערה: שאלמנט המקור בטל ויש לו תג התחלתי אך ללא תג סגירה
הדבר הכי שימושי באלמנט המקור הוא שאנחנו יכולים להשתמש בו כדי לערום את סוגי הקבצים השונים, ומאפשר לדפדפן לנסות כל אחד בתורו עד שהוא ימצא אחד שהוא יכול לשחק.
שימוש ויחד
על מנת לערום קטעי וידאו בסוגים השונים בתוך אלמנט הווידאו, אנו מזינים את הקוד באופן הבא:
Your browser does not support the video element.
הקוד שלעיל יעבוד כעת בכל הדפדפנים למעט Internet Explorer, שיציג את ההודעה שצוינה לעיל.
אתה יכול לבדוק זאת בעצמך על ידי צפייה בדף ה- HTML5 Test Video, המכיל סרטון לדוגמא של פרפר בפורמט Theora OGG ו- MP4, כך שאם אתה צופה בזה ב- Firefox, Chrome, Safari, Opera או ב- iPhone או ב- מכשיר אנדרואיד, אתה אמור להיות מסוגל להציג את זה.
הסכינים החדות שביניכם ישימו לב שאנו יכולים לנצל את הערימה הזו ויש לנו כיבוי לפלאש (או תוסף אחר) בתחתית במקום להציג סליחה שאינכם יכולים לראות את הודעת הווידאו הזו, באמצעות הקוד הבא. :
data='flvplayer.swf?file=myVideo.flv&autoStart=true'>
'
סיכום
כמו ברוב האלמנטים של HTML5, תמיכת הדפדפן עבור רכיבי המקור והווידאו כרגע היא חלקית. כרגע מתנהל ויכוח גדול גם אם אלמנט המקור יהרוג את השימוש בפלאש כשיטה הפופולרית ביותר להוסיף תוכן וידאו לאתרים. אני לא בטוח שזה יהרוג את פלאש לחלוטין, אבל בכל זאת אני חושב שזה הוגן לומר שזה כאן כדי להישאר ויספק למפתחי אינטרנט גישה נקייה וקלה יותר להטמעת וידאו.
