תג הווידאו HTML 5 מקל על הוספת וידאו לדפי האינטרנט שלך. אבל למרות שזה נראה קל על פני השטח, יש הרבה דברים שאתה צריך לעשות כדי לקבל את הווידאו ולהפעלתו. הדרכה זו תעביר אותך דרך השלבים ליצירת דף ב- HTML 5 שיפעיל וידאו בכל הדפדפנים המודרניים.
- אירוח HTML משלך 5 לעומת וידאו
- סקירה כללית של תמיכה בווידאו באינטרנט
- ליצור ולערוך את הווידאו שלך
- המרת וידאו ל - OGG עבור
- המרת וידאו ל MP4 עבור ספארי
- המרת וידאו ל FLV עבור
- הוסף את אלמנט הווידאו לדף האינטרנט שלך
- הוסף את JavaScript ו - Flash Player כדי לקבל את. כדי לעבוד חלק 1
- מבחן כמו דפדפנים רבים ככל שתוכל
01 מתוך 10
אירוח HTML משלך 5 לעומת וידאו
YouTube הוא אתר נהדר. זה מקל על הטמעת וידאו לתוך דפי אינטרנט במהירות, ועם כמה חריגים קטנים הוא די חלקה בביצוע של קטעי וידאו אלה. אם תפרסם סרטון ב- YouTube, תוכל להיות בטוח למדי שכל אחד יוכל לצפות בו.
אבל באמצעות YouTube כדי לשלב וידאו שלך יש חסרונות
רוב הבעיות עם YouTube הן בצד הצרכני, ולא בצד המעצב, דברים כמו:
- חיפוש איטי ואינדקס
- הפסקות שרת
- תוכן מוסר (לכאורה) באופן שרירותי
- תוכן רע מדי
אבל יש כמה סיבות לכך ש- YouTube רע למפתחי תוכן, כולל:
- אורך מקסימלי של 10 דקות לסרטונים (עבור חשבונות בחינם)
- ביצועים ירודים להעלאה
- YouTube מקבלת זכויות שימוש בלתי מוגבלות לסרטון שלך
- כל משתמש YouTube מקבל זכויות שימוש בלתי מוגבלות לסרטון שלך
HTML 5 וידאו נותן כמה יתרונות על
השימוש ב- HTML 5 לווידאו יאפשר לך לשלוט בכל היבט של הסרטון שלך, ממי שיכול להציג אותו, כמה זמן הוא מכיל, מה התוכן מכיל, היכן הוא מתארח וכיצד השרת מבצע. ו HTML 5 וידאו נותן לך את ההזדמנות לקודד את הווידאו שלך בפורמטים רבים ככל שאתה צריך כדי לוודא את המספר המרבי של אנשים יכולים להציג את זה. הלקוחות שלך אינם זקוקים לפלאגין או להמתין עד ש- YouTube ישחרר גרסה חדשה יותר.
כמובן, HTML 5 וידאו לעסקים כמה חסרונות
אלו כוללים:
- אתה צריך לקודד את הווידאו שלך לפחות שלושה רכיבי codec שונים
- עליך לכלול JavaScript כדי לוודא שדפדפנים שאינם תומכים ב- HTML 5 יעבדו
- השרת שלך צריך להיות מסוגל להתמודד עם דרישות רוחב הפס של אירוח קטעי וידאו
02 מתוך 10
סקירה כללית של תמיכה בווידאו באינטרנט
הוספת וידאו לדפי אינטרנט כבר מזמן תהליך קשה. היו כל כך הרבה דברים שיכולים להשתבש:
- ראשית, אתה משתמש בתג
- אז אתה עובר לתג
- אז אתה חושב " פלאש !" ו לקודד את הווידאו כקובץ FLV. אבל Flash אינו נתמך על מכשירים ניידים רבים ואנשים רבים שונאים פלאש לא משנה איך זה משמש (25% מהנשאלים בסקר שלי שואל על איך אתה מרגיש על פלאש ציינו כי הם לא יכולים לסבול פלאש בכל דרך).
- אז אתה מחליט להעלות את הסרטון שלך לאתר הטבעת וידאו כמו YouTube, אבל אז יש לך את הבעיות עם YouTube דנו.
- לבסוף, אתה מחליט ללכת עם HTML 5, אבל Internet Explorer אינו תומך בו (לא עד Internet Explorer 9). וגם אם אתה עושה, ישנם שני תקני codec וידאו הנתמכים ורק דפדפן אחד שיכול להשתמש בשני. תמיכה בדפדפן עבור רכיבי Codec וידאו ומכולות
אז מה אתה אמור לעשות? ויתור על הסרטון אינו עוד אופציה עבור רוב האתרים, שכן הסרטון הופך להיות יותר ויותר חשוב. אתרים רבים עברו בהצלחה וידאו.
הדפים הבאים של מאמר זה ידריכו אותך כיצד להוסיף וידאו לדפי האינטרנט שלך שעובדים ב- Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 ו- 4, iPhone ו- Android, Flash ו- Internet Explorer 7 ו- 8. יש גם את המפתחות שאתה צריך להוסיף תמיכה עבור דפדפנים ישנים אחרים במידת הצורך.
03 מתוך 10
ליצור ולערוך את הווידאו שלך
הדבר הראשון שאתה צריך כאשר אתה הולך לשים וידאו בדף אינטרנט הוא וידאו בפועל. אתה יכול לצלם ברציפות ולערוך אחר כך ליצור תכונה, או שאתה יכול סקריפט זה ולתכנן את זה מראש. כך או כך עובד טוב, זה בדיוק מה שאתה מרגיש בנוח עם. אם אינך יודע איזה סוג של סרטון עליך לבצע, בדוק את הרעיונות האלה מתוך המדריך וידאו שולחני:
- פרוייקטים משפחתיים
- שיווק וקידום מכירות וידאו
- סיור וירטואלי בווידאו
- כיצד קטעי וידאו
- וידאו חתונה
למד כיצד להקליט וידאו באיכות גבוהה
ודא שאתה יודע איך להקליט בתוך הבית וגם בחוץ, כמו גם כיצד להקליט אודיו. תאורה היא גם מאוד חשוב - יריות כי הם בהירים מדי לפגוע בעיניים, וכהה מדי רק נראה בוצי ולא מקצועי. גם אם אתה רק מתכנן להיות 30 שניות וידאו באתר שלך, איכות גבוהה יותר זה יהיה טוב יותר לשקף באתר האינטרנט שלך.
זכור גם כי זכויות יוצרים חל על כל צליל או מוסיקה (כמו גם צילומים מדה) כי ייתכן שתרצה להשתמש בסרטון שלך. אם אין לך גישה לחבר שיכול לכתוב ולשיר שיר בשבילך, תצטרך למצוא מוסיקה ללא תמלוגים לשחק ברקע. יש גם מקומות שאתה יכול המניה מדה להוסיף לסרטונים שלך.
עריכת הסרטון שלך
זה לא משנה מה תוכנת עריכת אתה משתמש, רק כל עוד אתה מכיר את זה והוא יכול להשתמש בו ביעילות. Gretchen, שולחן העבודה וידאו מדריך, יש כמה טיפים מקצועיים עריכת וידאו שיכולים לעזור לך לערוך את קטעי הווידאו, כך שהם נראים נהדר.
שמור את הווידאו ל MOV או AVI (או MPG, CD, DV)
עבור שאר הדרכה זו, אנחנו הולכים להניח שיש לך את הווידאו נשמר באיזה סוג של איכות גבוהה (לא דחוס) פורמט כמו AVI או MOV. בעוד שאתה יכול להשתמש בקבצים אלה כפי שהם, אתה נתקל בכל הבעיות עם וידאו שכבר דנו. הדפים הבאים יסבירו כיצד להמיר את הקובץ לשלושה סוגים, כך שניתן יהיה להציג אותו במספר הדפדפנים הגדול ביותר.
04 מתוך 10
המרת וידאו ל - OGG עבור
הפורמט הראשון שאנו להמיר הוא Ogg (המכונה לפעמים Ogg- Theora). פורמט זה הוא אחד כי Firefox 3.5, Opera 10.5, ו- Chrome 3 יכול להציג כל.
למרבה הצער, בעוד Ogg יש תמיכה בדפדפן, רבים של תוכניות וידאו ידוע שאתה יכול לקנות (Adobe Media Encoder, QuickTime, וכו ') לא מציעים אפשרות המרה Ogg. אז הדרך היחידה להמיר את הווידאו ל Ogg היא למצוא תוכנית ההמרה באינטרנט.
אפשרויות המרה
יש כלי מקוון שנקרא Media-Convert הטוען להמיר פורמטים שונים של וידאו (אודיו) לתוך וידאו אחרים (אודיו) פורמטים. כאשר ניסינו את זה עם הבדיקה שלי 3 שניות וידאו, אנחנו לא יכולים לקבל את זה לעבוד על MAC שלי. אבל ייתכן שיהיה לך מזל טוב יותר. אתר זה יש את היתרון של להיות חופשי.
כמה כלים אחרים שמצאנו כוללים:
- Miro Video Converter (Windows Macintosh) - תוכנית זו יש את היתרון של המרת הן Ogg ו MP4 (H.264) וזה קוד פתוח.
- ממיר וידאו Koyote (Windows)
- ממיר וידאו חינם אנחנו חושבים שזה גם גירסת Windows ו- Macintosh, אבל זה היה קשה לדעת מהאתר שלהם
- פשוט Theora Encoder (Macintosh) - זה אחד אנו נוטים להשתמש.
ברגע שיש לך את הווידאו נשמר בפורמט OGG, לשמור אותו במיקום באתר האינטרנט שלך ועבור לדף הבא כדי להמיר אותו בפורמטים אחרים עבור דפדפנים אחרים.
05 מתוך 10
המרת וידאו ל MP4 עבור ספארי
הפורמט הבא אתה צריך להמיר את הווידאו לתוך הוא MP4 (וידאו H.264), כך שניתן יהיה לשחק ב- Safari 3 ו -4 ו- iPhone ו- Android. בנוסף, H.264 קטעי וידאו ניתן להמיר בקלות קבצי FLV לצפייה ב- Flash.
פורמט זה זמין יותר במוצרים מסחריים, וכנראה כבר יש לך תוכנית כי יהיה להמיר ל MP4 אם יש לך עורך וידאו. אם יש לך Adobe Premiere אתה יכול להשתמש Adobe Encoder וידאו, או אם יש לך QuickTime Pro זה יעבוד גם כן. רבים מהמירים דנו בדף הקודם גם להמיר קטעי וידאו ל MP4.
- Media-Convert - כלי מקוון
- Miro Video Converter (Windows Macintosh) - תוכנית זו יש את היתרון של המרת הן Ogg ו MP4 (H.264) וזה קוד פתוח.
- סופר (Windows) - להמיר סוגים רבים של קבצים שונים ל MP4 ו FLV
- ממיר וידאו חינם אנחנו חושבים שזה גם גירסת Windows ו- Macintosh, אבל זה היה קשה לדעת מהאתר שלהם
שמור את הקובץ שלך MP4 לאתר האינטרנט שלך ולאחר מכן תצטרך להמיר אותו Flash עבור Internet Explorer להשתמש.
06 מתוך 10
המרת וידאו ל FLV עבור
הדרך הקלה ביותר להמיר קטעי וידאו ל FLV היא להשתמש ב- Flash עצמו. כך אנחנו להמיר קטעי וידאו שלי ל- Flash. אבל אם אין לך פלאש, הנה שני כלים פופולריים להמרת קבצים ל FLV:
- סופר (Windows) - להמיר סוגים רבים של קבצים שונים ל MP4 ו FLV
- ffmpegX (Macintosh) - יהיה להמיר סוגי קבצים שונים רבים Mp4 ו FLV.
שמור את הקובץ FLV לאתר האינטרנט שלך ואת הדף הבא יראה לך איך לכתוב את ה- HTML, כך שתוכל להפעיל את קטעי הווידאו.
07 מתוך 10
הוסף את אלמנט הווידאו לדף האינטרנט שלך
קל מאוד להשתמש ב- HTML 5 כדי להוסיף וידאו לדפי אינטרנט. רוב הדפדפנים המודרניים תומכים ב- HTML 5 וידאו, למרות שהם לא כולם תומכים בו באותו אופן. אבל מה זה אומר שאם אתה שומר את הווידאו כמו גם פורמטים Ogg ו- MP4, תוכל לכתוב רק ארבעה או חמישה שורות של HTML כדי להציג אותו ברוב הדפדפנים המודרניים (למעט Internet Explorer 8). כך:
- כתוב את ה- HTML 5 doctype סמן כך דפדפנים יודעים לצפות HTML 5:
- צור את דף האינטרנט שלך כפי שאתה עושה בדרך כלל ליצור אותו:
title>
head>
body>
html> - בתוך הגוף, הצב את התג
- החלט אילו תכונות תרצה שהסרטון שלך יכלול:
- הפעלה אוטומטית - להתחיל מיד עם הורדתו
- שולטת - לאפשר לקוראים שלך לשלוט על וידאו (להשהות, rewind, מהר קדימה)
- לולאה - להתחיל את הווידאו מההתחלה כאשר הוא מסתיים
- preload - הורד מראש את הסרטון כך שיהיה מוכן מהר יותר כאשר הלקוח לוחץ עליו
- - הגדר את התמונה שבה ברצונך להשתמש כאשר הסרטון יופסק
<בקרות סרטון מוקדמות> video>
- לאחר מכן, הוסף את קובצי המקור עבור שתי הגרסאות של הווידאו שלך (MP4 ו- OGG) בתוך אלמנט
: <בקרת וידאו מראש>
- פתח את הדף ב- Chrome 1, Firefox 3.5, Opera 10 ו / או Safari 4 וודא שהוא מוצג כראוי. אתה צריך לבדוק את זה לפחות ב- Firefox 3.5 ו ספארי 4 - כפי שהם כל להשתמש codec שונים.
זהו זה. ברגע שיש לך את הקוד במקום יהיה לך וידאו שעובד ב- Firefox 3.5, ספארי 4, אופרה 10, ו- Chrome 1. אבל מה עם Internet Explorer?
Internet Explorer אינו אוהב HTML 5 או תג
בסעיף הבא, נדבר על מה שאתה יכול לעשות כדי לקבל IE 8 לשחק יפה עם HTML 5 תגי וידאו ולהציג וידאו. אתה צריך להשתמש ב- Flash. החדשות הטובות הן ש- IE 9 צפוי לתמוך ב- HTML 5 ובתג הווידאו.
08 מתוך 10
הוסף את JavaScript ו - Flash Player כדי לקבל את
ייתכן שיהיה שם לב כי ב- HTML של הדף הקודם, לא היה קו מקור עבור קובץ FLV. ואם בדקה את הדף ב- Internet Explorer זה לא יעבוד. הסיבה לכך היא ש- Internet Explorer אינו מזהה HTML 5 והוא אינו יכול לנגן קטעי וידאו מסוג OGG או MP4 באופן מקורי. כדי לקבל את Internet Explorer 7 ו 8 לעבוד, אתה צריך את זה לשחק את הווידאו כמו פלאש. אבל יש עוד צעדים כדי לקבל את זה לעבוד מאשר רק הוספת קובץ FLV.
שלב 1: קבל Flash נגן וידאו עבור אתר האינטרנט שלך
אנו ממליצים לקבל FlowPlayer כי זה קוד פתוח Flash Player וידאו שאתה יכול להתקין בשרת האינטרנט שלך ולהשתמש בכל פעם שיש לך וידאו פלאש לשחק. הגרסה החינמית של FlowPlayer מכניסה פרסום לסרטונים שלך, אך תוכל גם לרכוש רישיונות מסחריים אם אתה זקוק להם.
בצע את ההוראות באתר FlowPlayer כדי להתקין את FlowPlayer באתר האינטרנט שלך. בקיצור, אתה תהיה התקנת 2 קבצי SWF וקובץ JavaScript באתר שלך. בתחתית ה- HTML שלך (לפני התג body> תוסיף שורה: