למד כיצד להטביע סרטוני וידאו בדפי אינטרנט ולהוסיף קובצי FLV ב-Dreamweaver.

הטבעת וידאו בדפי אינטרנט (HTML5)

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

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

הערה:

למרות שניתן להטביע כל וידאו בדף האינטרנט, לפעמים תצוגת Live אינה מעבדת את כל סרטוני הווידאו. תגי השמע והווידאו נתמכים ב-Dreamweaver באמצעות התוסף Apple QuickTime. ב-Windows, אם התוסף Apple QuickTime אינו מותקן, דף האינטרנט אינו מעבד את תוכן המדיה.

כדי לגלות כיצד להוסיף וידאו של HTML5, ראה הוספת סרטוני וידאו של HTML5 ב-Dreamweaver.

הוספת קובצי FLV

הוספת קובצי FLV

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

Dreamweaver מוסיף רכיב SWF המציג את קובץ FLV; בהצגה בדפדפן, רכיב זה מציג את קובץ FLV שנבחר יחד עם ערכת פקדי הפעלה.

קובץ FLV שנבחר וערכה של פקדי הפעלה
קובץ FLV שנבחר וערכה של פקדי הפעלה

Dreamweaver מספק את האפשרויות הבאות להצגת סרטון FLV בפני המבקרים באתר שלך:

Progressive Download Video

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

Streaming Video

מזרימה את תוכן הווידאו ומציגה אותו בדף אינטרנט לאחר אגירה קצרה, המבטיחה הצגה חלקה של הסרטון. כדי לאפשר הזרמת וידאו בדפי האינטרנט שלך, דרושה לך גישה ל-Adobe® Flash® Media Server.

ודא שיש לך קובץ FLV מקודד לפני תחילת העבודה ב-Dreamweaver. ניתן להוסיף קובצי וידאו שנוצרו עם אחד משני סוגי codec (טכנולוגיה לדחיסה/פריסה): Sorenson Squeeze או On2.

בדומה לקובצי SWF רגילים, בהוספת קובץ FLV, ‏‏Dreamweaver מוסיף את הקוד המזהה אם למשתמש יש את הגרסה המתאימה של Flash Player, על מנת שיוכל להציג את הסרטון. אם למשתמש אין גרסה מתאימה, הדף יציג תוכן חלופי שמודיע למשתמש שעליו להוריד את הגרסה האחרונה של Flash Player.

הערה:

להצגת קובצי FLV, על המשתמשים להתקין את Flash Player 8 או גרסה מתקדמת יותר. אם המשתמש לא התקין את הגרסה הדרושה של Flash Player, אולם ברשותו Flash Player 6.0 r65 או גרסה מתקדמת יותר, הדפדפן יציג תוכנת התקנה מהירה של Flash Player במקום התוכן החלופי. אם המשתמש יסרב להתקנה המהירה, הדף יציג את התוכן החלופי.

לקבלת מידע נוסף על עבודה עם וידאו, בקר באתר Video Technology Center בכתובת www.adobe.com/go/flv_devcenter_il.

הוספת קובץ FLV

  1. בחר Insert‏ > HTML‏ > Flash Video.

    הוספת Flash Video
    הוספת Flash Video

  2. בתיבת הדו-שיח Insert FLV, בחר Progressive Download או Streaming Video מתוך התפריט הנפתח Video Type.
  3. השלם את שאר האפשרויות בתיבת הדו-שיח ולחץ על OK.

הערה:

Microsoft Internet Information Server (IIS)‎ אינו מעבד תגי אובייקטים מקוננים. לדףי ASP‏, Dreamweaver משתמש בקוד של אובייקט מקונן או בקוד מוטבע במקום בקוד של אובייקט מוטבע בעת הוספת קובצי SWF או FLV.

הגדר אפשרויות להורדת וידאו מתקדמת

תיבת הדו-שיח Insert FLV מאפשרת להגדיר אפשרויות להורדה מתקדמת של קובץ FLV שהוספת לדף אינטרנט.

  1. בחר Insert‏ > HTML‏ > Flash Video (או לחץ על הסמל Flash Video בקטגוריה HTML בחלונית Insert).

  2. בתיבת הדו-שיח Insert FLV, בחר Progressive Download Video מתוך התפריט Video Type.
    הוספת Flash Video
    הוספת Flash Video

  3. ציין את האפשרויות הבאות:

    URL

    מציינת נתיב יחסי או מוחלט לקובץ FLV. על מנת לציין נתיב יחסי (לדוגמה mypath/myvideo.flv), לחץ על הלחצן Browse, נווט לקובץ FLV ובחר בו. על מנת לציין נתיב מוחלט, הקלד כתובת URL (לדוגמה, http://www.example.com/myvideo.flv) של קובץ FLV.

    Skin

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

    Width

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

    Height

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

    הערה:

    Total With Skin הוא הגובה והרוחב של קובץ FLV יחד עם הרוחב והגובה של המעטפת שנבחרה.

    Constrain

    שומרת על יחסי הגודל בין הרוחב והגובה של רכיב הווידאו. אפשרות זו היא אפשרות ברירת המחדל.

    Auto Play

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

    Auto Rewind

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

  4. לחץ על OK כדי לסגור את תיבת הדו-שיח ולהוסיף את קובץ FLV לדף האינטרנט שלך.

    הפקודה Insert FLV מחוללת קובץ SWF של נגן סרטונים וקובץ SWF של מעטפת, המשמשים להצגת תוכן הווידאו שלך בדף אינטרנט (על מנת לראות את הקבצים החדשים, ייתכן שיהיה עליך ללחוץ על הלחצן Refresh בחלונית Files). קבצים אלה מאוחסנים באותה ספרייה שבה מאוחסן קובץ HTML שאליו תוסיף את תוכן הווידאו. כשתטען דף HTML המכיל קובץ FLV, ‏Dreamweaver יטען קבצים אלה כקבצים תלויים (כל עוד תלחץ על Yes בתיבת הדו-שיח Put Dependent Files).

הגדרת אפשרויות להזרמת וידאו

תיבת הדו-שיח Insert FLV מאפשרת להגדיר אפשרויות להורדת וידאו זורם של קובץ FLV שהוספת לדף אינטרנט.

  1. בחר Insert‏ > HTML‏ > Flash Video (או לחץ על הסמל Flash Video בקטגוריה HTML בחלונית Insert).

  2. בחר Streaming Video מתוך התפריט הנפתח Video Type.
    הגדרת אפשרויות להזרמת וידאו
    הגדרת אפשרויות להזרמת וידאו

    Server URI

    מציינת את שם השרת, שם היישום ושם המופע במבנה rtmp://www.example.com/app_name/instance_name.

    Stream Name

    מציינת את השם של קובץ FLV שברצונך להציג (לדוגמה, myvideo.flv). הסיומת ‎.flv היא אופציונלית.

    Skin

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

    Width

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

    Height

    הגובה של קובץ FLV, בפיקסלים. Dreamweaver קובע את גובה הקובץ FLV ומאכלס באופן אוטומטי את הגובה בפיקסלים בשדה זה.

    הערה:

    Total With Skin הוא הגובה והרוחב של קובץ FLV יחד עם הרוחב והגובה של המעטפת שנבחרה.

    Constrain

    שומרת על יחסי הגודל בין הרוחב והגובה של רכיב הווידאו. אפשרות זו היא אפשרות ברירת המחדל.

    Live Video Feed

    מציינת האם תוכן הווידאו הוא בשידור חי. אם תבחר באפשרות Live Video Feed, ‏Flash Player יציג הזנת תוכן וידאו חי מ-Flash® Media Server. השם של הזנת הווידאו החי הוא השם שצוין בתיבת הטקסט Stream Name.

    הערה:

    כדי להפעיל Live Video Feed, עליך לבחור אחת מאפשרויות ה-Halo skin מתוך השדה Skin. אם תבחר באפשרות Live Video Feed, הפקד היחיד שיופיע במעטפת הרכיב יהיה עוצמת הקול, מכיוון שלא ניתן לשלוט על וידאו חי. בנוסף, לאפשרויות Auto Play ו-Auto Rewind לא תהיה כל השפעה.

    Auto Play

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

    Auto Rewind

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

    Buffer Time

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

  3. לחץ על OK כדי לסגור את תיבת הדו-שיח ולהוסיף את קובץ FLV לדף האינטרנט שלך.

    הפקודה Insert FLV מחוללת קובץ SWF של נגן סרטונים וקובץ SWF של מעטפת, המשמשים להצגת הסרטון שלך בדף אינטרנט. הפקודה יוצרת גם קובץ main.asc שעליך להעלות לשרת Flash Media Server (על מנת לראות את הקבצים החדשים, ייתכן שיהיה עליך ללחוץ על הלחצן Refresh בחלונית Files). קבצים אלה מאוחסנים באותה ספרייה שבה מאוחסן קובץ HTML שאליו תוסיף את תוכן הווידאו. כשתטען דף HTML המכיל קובץ FLV, אל תשכח לטעון את קובצי SWF לשרת האינטרנט שלך ואת הקובץ main.asc לשרת Flash Media Server.

    הערה:

    אם כבר יש קובץ main.asc בשרת, פנה למנהל השרת שלך לפני שתעלה את קובץ main.asc שיצרה הפקודה Insert FLV.

    ניתן להעלות בקלות את כל קובצי המדיה הדרושים, בבחירת מציין המיקום של רכיב הווידאו בחלון Document של Dreamweaver ולחיצה על הלחצן Upload Media ב-Property inspector‏ (Window ‏> Properties). כדי להציג רשימה של הקבצים הדרושים, לחץ על Show required files.

    הערה:

    הלחצן Upload Media לא מעלה את קובץ HTML שמכיל את תוכן הווידאו.

עריכת מידע על הורדה של Flash Player

בעת הוספה של קובץ FLV לדף, Dreamweaver מוסיף קוד שבודק אם למשתמש יש גרסה מתאימה של Flash Player. אם אין לו גרסה מתאימה, הדף מציג תוכן חלופי של ברירת מחדל, המודיע למשתמש שעליו להוריד את הגרסה האחרונה. ניתן לשנות טקסט חלופי זה בכל עת.

הליך זה חל גם על קובצי SWF.

הערה:

אם הגרסה הדרושה לא קיימת אצל המשתמש, אולם יש לו Flash Player 6.0 r65 או גרסה מתקדמת יותר, הדפדפן מציג תוכנת התקנה מהירה של Flash Player. אם המשתמש יסרב להתקנה המהירה, הדף יציג את התוכן החלופי.

  1. בתצוגת Design של חלון Document, בחר בקובץ SWF או בקובץ FLV.
  2. לחץ על סמל העין בקובץ SWF או בקובץ FLV.

    הערה:

    ניתן גם להקיש Control + ]‎ על מנת לעבור לתצוגת התוכן החלופי. כדי לשוב לתצוגת SWF/FLV, הקש Control + [‎ עד לבחירת הטקסט החלופי במלואו. לאחר מכן, הקש שוב Control + [‎.

  3. ערוך את התוכן באותו האופן שתערוך כל תוכן אחר ב-Dreamweaver.

    הערה:

    לא ניתן להוסיף קובצי SWF או קובצי FLV כתוכן חלופי.

  4. לחץ שוב על סמל העין כדי לשוב לתצוגה של קובץ SWF או FLV.

פתרון בעיות של קובצי FLV

סעיף זה מפרט כמה מהסיבות הנפוצות ביותר לבעיות בקובצי FLV.

בעיות תצוגה עקב היעדר קבצים קשורים

הקוד המופק על-ידי Dreamweaver CS4 ואילך מסתמך על ארבעה קבצים תלויים, בנפרד מקובץ FLV עצמו:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • קובץ המעטפת (לדוגמה, Clear_Skin_1.swf)

שים לב שיש שני קבצים תלויים נוספים עבור Dreamweaver CS4 ואילך בהשוואה ל-Dreamweaver CS3.

שני הקבצים הראשונים (swfobject_modified.js ו-expressInstall.swf) מותקנים בתיקייה בשם Scripts ש-Dreamweaver יוצר בשורש האתר, אם היא עדיין לא קיימת.

שני הקבצים השניים (FLVPlayer_Progressive.swf וקובץ המעטפת) מותקנים באותה תיקייה כמו הדף שבו מוטבע FLV. קובץ המעטפת מכיל את הפקדים של FLV, ושמו תלוי במעטפת שנבחרה באפשרויות המתוארות בעזרה של Dreamweaver. לדוגמה, אם בחרת Clear Skin, שם הקובץ יהיה Clear_Skin_1.swf.

יש להעלות את כל ארבעת הקבצים התלויים לשרת המרוחק כדי ש-FLV יוצג כראוי.

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

כדי לוודא שהעלית את כל הקבצים התלויים, השתמש בחלונית Files של Dreamweaver כדי להעלות את הדף שבו מופיע FLV. בעת העלאת הקובץ, Dreamweaver שואל אם ברצונך להעלות קבצים תלויים (אלא אם כן ביטלת אפשרות זו). לחץ על Yes כדי להעלות קבצים תלויים.

בעיות תצוגה בתצוגה מקדימה מקומית של דפים

עקב עדכוני אבטחה ב- Dreamweaver CS4, לא ניתן להשתמש בפקודה Preview in Browser לבדיקת עמודים עם FLV מוטבע, אלא אם כן הגדרת שרת בדיקות מקומי בהגדרת אתר Dreamweaver ואתה משתמש בשרת הבדיקות לתצוגה המקדימה של העמודים.

בדרך כלל, יש צורך בשרת בדיקות רק אם אתה מפתח עמודים עם ASP, ‏ColdFusion או PHP (ראה ‏‫הגדרת המחשב לפיתוח יישומים). אם אתה בונה אתרי אינטרנט המשתמשים ב-HTML בלבד, ולא הגדרת שרת בדיקות, הקשה על F12 ‏(Windows) או Opt+F12 ‏(Macintosh) יוצרת ערבוביה של פקדי מעטפת על-גבי המסך. הפתרון הוא להגדיר את שרת הבדיקות ולהשתמש בו לתצוגה מקדימה של הדף, או להעלות את הקבצים לשרת מרוחק ולהציג אותם שם.

הערה:

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

גורמים אפשריים אחרים לבעיות בקובצי FLV

  • אם אתה נתקל בבעיות בתצוגה מקדימה מקומית, ודא שהאפשרות Preview using temporary file לא נבחרה תחת Edit > ‏Preferences > ‏Real-time Preview.

  • ודא שהתוסף האחרון של FlashPlayer נמצא אצלך

  • היזהר מהעברת קבצים ותיקיות כאשר הם מחוץ לאתר Dreamweaver. בעת העברת קבצים ותיקיות מחוץ ל-Dreamweaver, ל-Dreamweaver אין אפשרות לוודא שהנתיבים הנכונים לקבצים הקשורים ל-FLV יישמרו.

  • ניתן להחליף זמנית קובץ FLV המהווה בעיה בקובץ FLV שידוע לך שהוא פועל. אם קובץ ה-FLV החלופי עובד, הבעיה נעוצה בקובץ ה-FLV המקורי, ולא בדפדפן או במחשב.

עריכה או מחיקה של רכיב FLV

שנה את הגדרות הסרטון בדף האינטרנט שלך, בבחירת מציין המיקום של רכיב הווידאו בחלון Document של Dreamweaver ושימוש ב-Property inspector. דרך אחרת היא למחוק את רכיב הווידאו ולהוסיפו מחדש על-ידי בחירה באפשרות Insert ‏> HTML ‏> Flash Video.

עריכה של רכיב FLV

  1. בחר את מציין המיקום של רכיב הווידאו בחלון המסמך של Dreamweaver בלחיצה על הסמל FLV שבמרכז מציין המיקום.
  2. פתח את מפקח המאפיינים (Window ‏‏> Properties) ובצע את השינויים הרצויים.

    הערה:

    לא ניתן להחליף את סוג הווידאו (למשל, מהורדה מתקדמת לווידיאו זורם) ב-Property inspector. על מנת לשנות את סוג הווידאו, מחק את רכיב FLV והוסף אותו מחדש בבחירת הפקודה Insert ‏> Media ‏> FLV.

מחיקה של רכיב FLV

  1. בחר את מציין המיקום של רכיב FLV בחלון Document של Dreamweaver והקש Delete.

הוספת וידאו (תבניות אחרות)

כדי לגלות כיצד להוסיף סרטוני וידאו שאינם קובצי ‎.flv, ראה הוספת וידאו (שאינו FLV)

ודאי תרצה גם לדעת כיצד להוסיף תוכן של תוסף ב-Dreamweaver להפעלת קובצי ‎.mp3 או סרטוני וידאו של Quicktime באתר Dreamweaver.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת