שימוש ב- HTML5 להצגת וידאו בדפדפנים נוכחיים

אירוח סרטון HTML 5 משלך לעומת באמצעות יוטיוב

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

אבל השימוש ביוטיוב להטמעת הסרטונים שלך מביא כמה חסרונות

רוב הבעיות עם יוטיוב נמצאים בצד הצרכן, ולא בצד המעצבים, דברים כמו:

• חיפוש ואינדקס איטיים
• הפסקות שרת
• תוכן מוסר (לכאורה) באופן שרירותי
• יותר מדי תוכן גרוע

אבל יש כמה סיבות מדוע YouTube רע גם למפתחי תוכן, כולל:

• אורך מרבי של 10 דקות לסרטונים (לחשבונות בחינם)
• ביצועי העלאה גרועים
• YouTube מקבל זכויות שימוש בלתי מוגבלות לסרטון שלך
• כל משתמש ב- YouTube מקבל זכויות שימוש בלתי מוגבלות לסרטון שלך

HTML5 Video נותן כמה יתרונות ביוטיוב

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

כמובן, וידאו HTML5 מציע כמה חסרונות

אלו כוללים:

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

סקירה מהירה של תמיכת וידאו באינטרנט

הוספת וידאו לדפי אינטרנט הייתה כבר זמן רב תהליך קשה. היו כל כך הרבה דברים שיכולים להשתבש:

• ראשית, אתה משתמש ב- תג כדי להטמיע את הסרטון בדף שלך. אבל תג זה הוצא משימוש לטובת תג אחר. וכמה דפדפנים מעולם לא תמכו בזה טוב.
• אז אתה עובר ל תג, אך דפדפנים ישנים אינם תומכים בכך ודפדפנים חדשים יותר משרטטים בתמיכתו.
• ואז אתה חושב הֶבזֵק! וקודד את הסרטון שלך כקובץ FLV. אבל הֶבזֵק אינו נתמך עוד במכשירי Windows.
• אז אתה מחליט להעלות את הסרטון שלך לאתר הטמעה בווידאו כמו יוטיוב, אבל אז יש לך את הבעיות עם יוטיוב עליו דנו.
• לבסוף, אתה מחליט ללכת עם HTML5, אך Internet Explorer אינו תומך בכך (רק עד Internet Explorer 9). וגם אם כן, ישנם שני תקני codec וידאו הנתמכים ורק דפדפן אחד שיכול להשתמש בשניהם.

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

הדפים הבאים במאמר זה יסייעו לך כיצד להוסיף סרטון לדפי האינטרנט שלך שעובדים ב- Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 ו- 4, iPhone ו- Android, ו- Internet Explorer 7 ו- 8. יהיה לך גם את המקשים הדרושים לך כדי להוסיף תמיכה לדפדפנים ישנים אחרים במידת הצורך.

צור וערוך את הסרטון שלך

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

• פרויקטים של וידאו משפחתי
• סרטוני שיווק וקידום מכירות
• סיורים ווירטואליים בווידאו
• איך סרטונים
• סרטוני חתונה

למד כיצד להקליט וידאו באיכות גבוהה

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

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

עריכת הסרטון שלך

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

שמור את הסרטון שלך ב- MOV או AVI (או MPG, CD, DV)

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

המרת הווידאו ל- Ogg עבור Firefox

הפורמט הראשון אליו נעבור הוא אוג (המכונה לפעמים אוג-תיאורה). פורמט זה הוא אחד ש- Firefox 3.5, Opera 10.5 ו- Chrome 3 יכולים להציג.

לרוע המזל, בעוד של- Ogg יש תמיכה בדפדפן, רבות מתוכניות הווידאו הידועות שאתה יכול לקנות (Adobe Media Encoder, QuickTime וכו ') אינן מציעות אפשרות המרה של Ogg. אז הדרך היחידה להמיר את הווידאו שלך ל- Ogg היא למצוא תוכנית המרה באינטרנט.

אפשרויות המרה

יש כלי מקוון שנקרא Media-Convert המתיימר להמיר פורמטים שונים של וידאו (ואודיו) לפורמטים אחרים של וידאו (ואודיו). כשניסינו את זה עם סרטון הבדיקה שלי בן 3 השניות, לא הצלחנו לגרום לו לעבוד על ה- Mac שלי. אבל יכול להיות שיהיה לך מזל טוב יותר. לאתר זה יש יתרון בחינם.

כמה כלים אחרים שמצאנו כוללים:

• ממיר וידאו מירו (Windows Macintosh): לתוכנית זו יש יתרון בהמרה ל- Ogg ו- MP4 (H.264) והיא קוד פתוח.
• ממיר וידאו בחינם: אנו חושבים שיש לכך גם גרסת חלונות וגם גרסת מקינטוש, אך היה קשה לדעת מהאתר שלהם
• מקודד תיאורה פשוט (מקינטוש): זה אחד שאנחנו נוטים להשתמש בו.

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

המר את הווידאו ל- MP4 עבור Safari ו- Internet Explorer

הפורמט הבא שעליו להמיר את הווידאו שלך הוא MP4 (וידאו H.264), כך שניתן יהיה להפעיל אותו ב- Internet Explorer 9 ואילך, ב- Safari 3 ו -4 וב- iPhone ו- Android.

פורמט זה זמין יותר במוצרים מסחריים, וכנראה שיש לך כבר תוכנית שממירה ל- MP4 אם יש לך עורך וידאו. אם יש לך אדובי פרמייר אתה יכול להשתמש בקודן הווידאו של Adobe, או אם יש לך QuickTime Pro שעובד גם כן. רבים מהממירים עליהם דנו בעמוד הקודם ממירים גם קטעי וידאו ל- MP4.

• MediaConvert: כלי AWS מקוון.
• ממיר וידאו מירו (Windows Macintosh): לתוכנית זו יש יתרון בהמרה ל- Ogg ו- MP4 (H.264) והיא קוד פתוח.
• סוּפֶּר (Windows): ימיר סוגי קבצים רבים ושונים ל- MP4
• ממיר וידאו בחינם: אנו חושבים שיש לכך גם גרסת חלונות וגם גרסת מקינטוש, אך היה קשה לדעת מהאתר שלהם.

הוסף את אלמנט הווידאו לדף האינטרנט שלך

1. צור את דף האינטרנט שלך כמו שאתה יוצר אותו בדרך כלל:

2. בתוך הגוף, הניח את
3. החלט מה התכונות שאתה רוצה שיהיה לסרטון שלך: אנו ממליצים להשתמש בפקדים וטעינה מוקדמת. השתמש באפשרות הכרזה אם לסרטון שלך אין סצנה ראשונה טובה.
   הפעלה אוטומטית - להתחיל ברגע שהוא מוריד
4. פקדים - אפשר לקוראים שלך לשלוט בסרטון (השהה, אחורה אחורה, קדימה מהירה)
5. לולאה - התחל את הסרטון מההתחלה כשהוא מסתיים
6. טעינה מוקדמת - הורידו מראש את הסרטון כך שהוא יהיה מוכן מהר יותר כשהלקוח לוחץ עליו
7. פוסטר - הגדירו את התמונה בה תרצו להשתמש בעת הפסקת הסרטון
8. לאחר מכן הוסף את קבצי המקור לשתי הגרסאות של הסרטון שלך (MP4 ו- OGG) בתוך ה-
9. פתח את הדף ב- Chrome 1, Firefox 3.5, Opera 10 ו / או Safari 4 וודא שהוא מוצג כהלכה. עליכם לבדוק זאת לפחות ב- Firefox 3.5 וב- Safari 4 - מכיוון שכל אחד מהם משתמש בקודק אחר.

זהו זה. ברגע שיש לך את הקוד הזה יהיה לך סרטון שעובד ב- Firefox 3.5, Safari 4, Opera 10 ו- Chrome 1. אבל מה לגבי Internet Explorer?

קל מאוד להשתמש ב- HTML 5 כדי להוסיף סרטון לדפי אינטרנט. רוב הדפדפנים המודרניים תומכים בווידאו HTML 5, אם כי לא כולם תומכים בו באותה צורה. אבל המשמעות היא שאם אתה שומר את הווידאו שלך בפורמט Ogg ו- MP4, אתה יכול לכתוב רק ארבע או חמש שורות של HTML כדי להציג אותו ברוב הדפדפנים המודרניים (למעט Internet Explorer 8). כך:

כתוב את סמן הדוקטיפ של HTML 5 כדי שהדפדפנים יידעו לצפות ל- HTML 5:

1. צור את דף האינטרנט שלך כמו שאתה יוצר אותו בדרך כלל:

2. בתוך הגוף, הניח את
3. החלט מה התכונות שאתה רוצה שיהיה לסרטון שלך: אנו ממליצים להשתמש בפקדים וטעינה מוקדמת. השתמש באפשרות הכרזה אם לסרטון שלך אין סצנה ראשונה טובה.
   הפעלה אוטומטית - להתחיל ברגע שהוא מוריד
4. פקדים - אפשר לקוראים שלך לשלוט בסרטון (השהה, אחורה אחורה, קדימה מהירה)
5. לולאה - התחל את הסרטון מההתחלה כשהוא מסתיים
6. טעינה מוקדמת - הורידו מראש את הסרטון כך שהוא יהיה מוכן מהר יותר כשהלקוח לוחץ עליו
7. פוסטר - הגדירו את התמונה בה תרצו להשתמש בעת הפסקת הסרטון
8. לאחר מכן הוסף את קבצי המקור לשתי הגרסאות של הסרטון שלך (MP4 ו- OGG) בתוך ה-
9. פתח את הדף ב- Chrome 1, Firefox 3.5, Opera 10 ו / או Safari 4 וודא שהוא מוצג כהלכה. אתה צריך לבדוק את זה לפחות ב- Firefox 3.5 וב- Safari 4 מכיוון שהם משתמשים בקודק אחר.

זהו זה. ברגע שיש לך את הקוד הזה יהיה לך סרטון שעובד ב- Firefox 3.5, Safari 4, Opera 10, Internet Explorer 9+ ו- Chrome 1.

בדוק בדפדפנים רבים ככל שתוכל

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

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

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

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

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

איך הסרטון עובד בדפדפנים ישנים יותר

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

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