הוספת סרטוני וידאו ב-Dreamweaver

עודכן לאחרונה בתאריך 25 בספטמבר 2023

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

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

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

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

פתק

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

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

הוספת קובצי FLV

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

Dreamweaver מכניס רכיב SWF שמציג את קובץ ה-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

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

בתיבת הדו-שיח Insert FLV, בחרו Progressive Download או Streaming Video מתפריט Video Type.

השלימו את שאר האפשרויות בתיבת הדו-שיח ולחצו על OK.

פתק

Microsoft Internet Information Server (IIS) לא מעבד תגי object מקוננים.עבור דפי ASP,‏ Dreamweaver משתמש בקוד object/embed מקוננים במקום בקוד object מקוננים בעת הכנסת קובצי SWF או FLV.

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

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

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

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

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

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

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

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

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

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

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

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

בחר Streaming Video מתוך התפריט הנפתח Video Type.

Server URI

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

Stream Name

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

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

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

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

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

פתק

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

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

פתק

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

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

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

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

פתק

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

בתצוגת עיצוב של חלון המסמך, בחרו את קובץ ה-SWF או את קובץ ה-FLV.

לחץ על סמל העין בקובץ SWF או בקובץ FLV.

פתק

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

ערכו את התוכן בדיוק כפי שהייתם עורכים כל תוכן אחר ב-Dreamweaver.

פתק

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

לחצו שוב על סמל העין כדי לחזור לתצוגת קובץ 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 לפעול כראוי בדף אינטרנט.אם אחד הקבצים חסר, אולי תראו "תיבה לבנה" בדף.

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

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

בגלל עדכוני האבטחה ב-Dreamweaver CS4, אינכם יכולים להשתמש בפקודת תצוגה מקדימה בדפדפן כדי לבדוק דף עם 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

בחרו את מציין המיקום של רכיב הווידאו בחלון המסמך של Dreamweaver על ידי לחיצה על סמל ה-FLV במרכז מציין המיקום.

פתחו את Property inspector (Window > Properties) ובצעו את השינויים שלכם.

פתק

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