HTML5 וידאו 10 דברים מעצבים צריכים לדעת

המהפכה HTML5 הוא מעצבי אינטרנט מרגש מכל תחומי העולם. המפרטים החדשים תומכים בעשרות אלמנטים ותכונות לבניית אתרים סמנטיים. תכונות חדשות אלה כוללות תגי מולטימדיה עבור פורמטי אודיו ווידאו.

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

במדריך זה אני רוצה להציע מבוא HTML5 וידאו עבור האינטרנט. זה ייקח קצת תרגול להבין את יליד בתוך הדפדפן שחקן וכל הפונקציונליות שלו. הדרך הטובה ביותר להגיע מוכר הוא צלילה בראש הראשון!

1. סוגי מדיה

כאשר אתה עובד עם נגן וידאו פלאש זה הכל נפוץ מדי כדי לקשר את כל פורמטי הווידאו. FLV. אמנם זה עובד, רוב קבצי FLV לא יכול לשמור על איכות בכל מקום ליד פורמטים של קבצים מתקדמים / רכיבי codec. ישנם 3 סוגי וידאו חשובים הנתמכים על ידי HTML5: MP4, WebM ו- Ogg / Ogv. MPEG-4 סוג הקובץ מקודד בדרך כלל ב H.264 המאפשר השמעה של צד שלישי שחקנים Flash. זה אומר שאתה לא צריך לשמור עותק .vv וידאו לתמוך בשיטה flback! WebM ו- Ogg הם שני סוגי קבצים חדשים הרבה יותר הקשורים וידאו HTML5. Ogg משתמשת בקידוד Theora אשר מבוסס על קוד פתוח פורמט קובץ שמע רגיל. ניתן לשמור אותם באמצעות סיומת .gog או .vv.

WebM הוא פרויקט שמוציא על ידי Google, שבו תוכל לקרוא מידע נוסף באתר WebM Project. הפורמט כבר נתמך על ידי Opera, Google Chrome, Firefox 4+, ולאחרונה Internet Explorer 9. זה עדיין לא ידוע על ידי רוב אנשי מקצוע באינטרנט, אבל WebM הוא פורמט המדיה וידאו המובילה בעתיד של וידאו באינטרנט.

2. תמיכה בדפדפן

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

• Mozilla Firefox - WebM, Ogg
• Google Chrome -
• אופרה -
• ספארי - MP4
• 9 - MP4
• Internet Explorer 6-8 - לא HTML5, פלאש בלבד!

אם אתה זוכר, קודם לכן הזכרתי כי רוב נגני וידאו פלאש יתמוך MP4 קבצים כל עוד הם מקודדים ב H.264. ככזה, כל הדפדפנים האלה ישלטו MP4 + Flash כמוצא סופי. זה אומר שאתה רק צריך ליצור שתיים פורמטים שונים של וידאו כדי לתמוך בכל הדפדפנים. MP4 עבור Safari / IE9 וכן בחירה בין WebM או OG עבור כל השאר.

לדעתי אני מאוד ממליץ דבק בפורמט WebM. יש כמה שמות גדולים מאחורי הפרויקט (כלומר גוגל) וצברה הרבה המתיחות בקהילת HTML5. Ogg / Ogv יתמכו אך סביר להניח לאבד את הפופולריות של גודל הקובץ הקטן של WebM. אתה יכול לקרוא קטע בנושא על העתיד של וידאו באינטרנט נכתב על ידי שון Golliher.

3. הטבעה פשוטה HTML5 וידאו

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

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

אנו מציעים הן MP4 ו- WebM פורמטים פנימיים אלמנט הווידאו. אם אף אחד מאלה לא ניתן לטעון אז אנו מציגים שגיאה עבור המשתמש כדי לעדכן את הדפדפן שלהם.

4. הצעת פלאש Fallback

הדוגמה שלמעלה היא מושלמת עבור כל דפדפני אינטרנט תואמי תקנים. עם זאת, עלינו גם לחשוב שהעולם אינו תמיד בחזית הטכנולוגיה. אנחנו צריכים לתמוך למשתמשים בגירסאות ישנות יותר של Safari, Mozilla Firefox ובמיוחד Internet Explorer.

הדרך הטובה ביותר להשיג זאת היא באמצעות שחקן פלאק פלאש. אלה ניתן להוסיף באמצעות להטביע או אובייקט תגים כדי התייחסות צד שלישי. קובץ swf. JW Player ו Flowplayer הם שני פתרונות קוד פתוח חינם אתה יכול לשקול. אבל גם לבדוק את השחקנים וידאו Premium על ActiveDen אשר יכול ללכת כמו זול כמו $ 15 - $ 20.

עכשיו בואו לצבוט את הקוד לעיל כדי לכלול flashback Player לתמוך כמעט כל דפדפן קיים.

5. תמיכה בהתקנים ניידים

נושא זה עדיין מתווכח מאוד מאז תעשיית הנייד הוא כל כך צעיר. Apple יצא עם תמיכה MP4 ב- Mac ו- iOS התקנים. זה אומר שאתה יכול להזרים באופן מקורי. MP4 קבצי וידאו על iPad, iPhone או iPod Touch בממשק וידאו סטנדרטי. זה מכסה הרבה נתח השוק.

לאחרונה התקני Android התקשו להגיע לרמה זהה של תמיכה. עם זאת גוגל אימצה סוף סוף. הזרמת האינטרנט 4MP אשר כעת capitalizes כמעט על כל המשתמשים הניידים. ומכיוון Flash הוא לא אופציה כאן MP4 הוא הפתרון הטוב ביותר הזמין. זו הסיבה שאתה רוצה להטביע את קוד .mp4 הראשון כך iOS התקנים יכולים לזהות את הקובץ באופן מיידי.

6. Safari סוכן משתמש

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

זה יאלץ את דף האינטרנט שלך לזהות את הדפדפן כמו פועל על מכשיר אחר. סביר להניח שתבחר iPad, אשר אינו תומך כל השמעה Flash. זוהי הבעיה העיקרית היחידה שאתה יכול להיתקל בעת בדיקת MP4 דובר & השמעה שיטות פלאש.

7. ניהול פקדי הנגן

תאמינו או לא יש גם שיטות אתה יכול להשתמש כדי לתפעל HTML5 נגן וידאו שולט. כל זה יכול להיעשות ב- JavaScript על ידי משיכה ממערכת של שיטות פתוחות. יש דרכים רבות מדי לרשום כאן, אבל לנסות לרפרף דרך אלמנט W3C אלמנט התקשורת לפרטים נוספים.

כדי לתת לך רעיון כללי, הבלוג של האופרה dev כתב כמה הדרכות קצר אשר נהדר עבור מתחילים. גם אם מעולם לא הרים JavaScript או jQuery לפני, זה עדיין פשוט להכות את הקרקע פועל עם זה. ניתן להתקשר למאפיינים ספציפיים של מדיית הווידאו, כגון מושתק או זמן נוכחי. לאחר מכן תוכל לבצע פעולות (עומק הרקע, מודעות לתצוגה) על סמך קריטריונים אלה על ידי מניפולציה של DOM ב- jQuery.

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

8. המרת פורמט וידאו

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

כדי להתמודד עם MP4 המהווה את העדיפות הגדולה ביותר שלך, אתה יכול להשתמש בלם יד אשר הוא חופשי, קוד פתוח פתרון אשר פועל על כל מערכת ההפעלה 3 הגדולות. זה יתמוך H.264 יחד עם כמה רכיבי codec אחרים אשר עושה את זה האפשרות הטובה ביותר עבור משתמשים freebie. אם יש לך את הכסף לשלם החוצה אני חייב להמליץ ​​Xilisoft ממיר אשר על MAC App Store רק עבור $ 40 רישיון חיים.

זה נראה כמו המסלול WebM עושה את החיים הרבה יותר קל. Miro Video Converter הוא כלי ללא תשלום עבור Windows ו- OS X אשר מייצרת קבצי WebM באיכות מעולה. זה יכול גם לעשות קידוד Ogg theora אשר יוצא עם איכות די גדולה גם כן.

9. בניית נגן אינטרנט

פורמטים של וידאו עם מפרט HTML5 עדיין חדשים למפתחים. יש פרוטוקולים פתוחים רק מחכה להיות שיחק עם כדי לאפשר פקדים מותאמים אישית, המחוונים, לשחק / להשהות סמלים, וכו 'אם אתה מרגיש מודגש, לבדוק את זה הדרכה על איך לעשות משלך HTML5 שחקן (פורסם ב Splashnology).

הקוד הוא קצת אינטנסיבי עבור newcomers כפי שהוא דורש מיקוד CSS מתקדמים קצת jQuery רשמי. ישנן מסגרות אחרות אתה יכול לבנות על אשר כבר מציעים עיצוב שחקן מותאם אישית. באופן דומה מצגת זו Slideshare הוא מבוא נהדר לבניית נגן וידאו HTML5.

בניית נגן וידאו HTML5

10. VideoJS הספרייה

VideoJS הוא כנראה הפתרון האהוב עלי HTML5 נגני וידאו. כל מה שאתה צריך זה self-hosted JavaScript ו- CSS סגנונות כלל אי ​​שם את המסמך. לאחר מכן אתה כותב את קוד HTML5 וידאו רגיל עם כמה שיעורים נוספים עבור הפשטה. הוספתי את קוד הדוגמה שלהלן:

אם אתה מפעיל את הבלוג וורדפרס אתה יכול גם לנסות תוסף WP מותאם אישית שלהם. זה יכלול באופן אוטומטי את js / css בספריה בדפים שבהם אתה מציג וידאו HTML5. ואתה יכול לעשות זאת מתוך כל פוסט או עורך דף באמצעות קודים (ראה כאן).

סיכום

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