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

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

• אירוח משלך HTML5 וידאו לעומת
• סקירה כללית של תמיכה בווידאו באינטרנט
• ליצור ולערוך את הווידאו שלך
• המרת וידאו ל - OGG עבור
• המרת וידאו ל MP4 עבור ספארי
• המרת וידאו ל FLV עבור
• הוסף את אלמנט הווידאו לדף האינטרנט שלך
• הוסף את JavaScript ו - Flash Player כדי לקבל את
• מבחן כמו דפדפנים רבים ככל שתוכל

01 מתוך 10

אירוח HTML משלך 5 לעומת וידאו

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

אבל באמצעות YouTube כדי לשלב וידאו שלך יש חסרונות

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

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

אבל יש כמה סיבות לכך ש- YouTube רע למפתחי תוכן, כולל:

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

וידאו HTML5 נותן כמה יתרונות על

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

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

אלו כוללים:

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

המשך קריאה למטה

02 מתוך 10

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

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

• ראשית, אתה משתמש כדי לשלב את הסרטון בדף שלך. אבל תג זה הוצא משימוש לטובת תג אחר. וכמה דפדפנים מעולם לא תמכו בו היטב.
• אז אתה עובר , אך דפדפנים ישנים יותר אינם תומכים בו ודפדפנים חדשים יותר מתוארים בתמיכתה.
• אז אתה חושב פלאש! ו לקודד את הווידאו כקובץ FLV. אבל Flash אינו נתמך על מכשירים ניידים רבים ואנשים רבים שונאים פלאש לא משנה איך זה משמש (25% מהנשאלים בסקר שלי שואל על איך אתה מרגיש על פלאש ציינו כי הם לא יכולים לסבול פלאש בכל דרך).
• אז אתה מחליט להעלות את הסרטון שלך לאתר הטבעת וידאו כמו YouTube, אבל אז יש לך את הבעיות עם YouTube דנו.
• לבסוף, אתה מחליט ללכת עם HTML5, אבל 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.

• MediaConvert - כלי AWS מקוון.
• 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:

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

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

זהו זה. ברגע שיש לך את הקוד במקום יהיה לך וידאו שעובד ב- Firefox 3.5, ספארי 4, אופרה 10, ו- Chrome 1. אבל מה עם 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 שלך, (לפני תג) תוסיף שורה:

אבל Internet Explorer עדיין לא יפעיל את הווידאו, אתה צריך ללמד אותו כיצד לזהות תגי HTML 5.

שלב 2: לשכנע את Internet Explorer לקרוא HTML 5 תגיות

יש סקריפט שימושי על קוד גוגל בשם "HTML שיב" שיעזור IE לזהות HTML 5 אלמנטים. אז ב של מסמך ה- HTML שברצונכם להפנות אליו. מומלץ לצרף אותו להערות מותנות של IE כך שדפדפנים אחרים לא יבלבלו:

אוקיי, עכשיו IE יזהה את

שלב 3: הוספת קו מקור עבור קובץ FLV

בדיוק כמו שעשית בדף הקודם, תוסיף שורה ל- HTML 5 שלך בתוך

המשך קריאה למטה

09 מתוך 10

הוסף את. ו - Internet Explorer כדי לקבל עבודה - חלק 2

למרבה הצער, אנחנו עדיין לא עושים. אנחנו צריכים עכשיו להגיד IE להשתמש Flash Player פלאש FlowPlayer הפנינו לעיל.

שלב 4: הפעל את

בשביל זה, אנחנו צריכים עוד תסריט. קיבלנו את התסריט מ- Dive לתוך HTML 5. אבל כאשר בדקנו את זה, זה לא עבד עד שעשינו כמה התאמות:

• בסביבות שורה 31: הוסף את המיקום של התקנת FlowPlayer.
• בסביבות קו 42: לשנות את סוג הקובץ מ וידאו / MP4 ל וידאו / x-flv
• בסביבות 94: מתחיל עם (!! $ & & $ $ $ (מסמך) .ready) {עד סוף המסמך, לשנות את סעיף זה כדי לקרוא:

  // if (!! $ & $ $ $ (document) .ready) {/ * משתמשים jQuery יכול לאתחל ברגע DOM מוכן * /// $ $ (document) .ready (html5_video_init);//} else/ * כולם יכולים לחכות עד onload * // * addEvent באמצעות http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ * /var addEvent = function (obj, type, fn) {אם (obj.addEventListener)obj.addEventListener (סוג, fn, false);אחרת אם (obj.attachEvent)obj.attachEvent ('on' + type, function () {return fn.apply (obj, new Array (window.event)););}addEvent (חלון, "לטעון", html5_video_init);//}

לאחר שתערוך את קובץ ה- JavaScript, העלה אותו לשרת שלך וקשר אליו בתחתית דף ה- HTML (לפני ):

וואו! כעת, לאחר שעשית את כל זה, עליך להעלות את ה- HTML שלך כדי שתוכל להתחיל בבדיקה.

10 מתוך 10

מבחן כמו דפדפנים רבים ככל שתוכל

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

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

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

• 3.5
• ספארי 3 או 4
• Internet Explorer 7 או 8

תוכל לבדוק ב- Chrome, אך מכיוון ש- Chrome יציג את כל שלוש השיטות (אפילו Flash, אם יש לך את הפלאגין), קשה לדעת אם יש בעיה באחד משני השניים האחרים או ב- Codec של Chrome.

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

תחילת העבודה וידאו בדפדפנים ישנים יותר

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

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