וובמאסטר - תיכנות ובניית אתרים

מדריך CSHTML - עבודה עם וידאו

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 4 פברואר, 2011
F+
F-

יש לך וידאו? אם כן, קל להציג אותו בדף אינטרנט. שפת CSHTML מאפשרת לך להציג בדף סרטונים של Flash (קבצי swf), סרטוני Media Player (קבצי wmv) או סרטוני Silverlight (קבצי xap).

מה תלמד:

  • איך לבחור נגן וידיאו.
  • כיצד להוסיף וידאו לדף אינטרנט.
  • כיצד להגדיר את תכונות נגן הוידאו.

אנו נשתמש בעוזר Video.

בחירת נגן וידאו

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

Video תומך בנגנים הבאים:

  • Adobe Flash
  • Windows Media Player
  • Microsoft Silverlight

נגן Flash

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

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

נגן MediaPlayer

נגן MediaPlayer של העוזר Video מאפשר לך להפעיל קטעי וידאו של Windows Media (קבצי wmv),  אודיו (קבצי wma), וקבצי mp3 בדף האינטרנט. אתה חייב לכלול את הנתיב של קובץ המדיה לניגון; כל שאר הפרמטרים האחרים הם אופציונליים. אם תציין רק נתיב, הנגן עושה שימוש בהגדרות ברירת המחדל המוגדרים על ידי הגירסה הנוכחית של MediaPlayer, כגון:

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

נגן Silverlight

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

ניגון סרטוני Flash (קבצי swf)

הליך זה מראה לך איך לנגן וידאו פלאש בשם sample.swf. ההליך מבוסס על ההנחה שיש לך תיקייה בשם Media באתר שלך וכי קובץ swf. זמין באותה תיקייה.

  1. הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
  2. באתר, הוסף דף בשם FlashVideo.cshtml.
  3. החלף את הקוד הקיים בדף בקוד הבא:
    <!DOCTYPE html>
    <
    html
    >
    <
    head>
      <title>Flash Video</title
    >
    </
    head
    >
    <
    body>
      @Video.Flash(path: "Media/sample.swf",
                     width: "400",
                     height: "600",
                     play: true,
                     loop: true,
                     menu: false,
                     bgColor: "red",
                     quality: "medium",
                     scale: "exactfit",
                     windowMode: "transparent")
    </body
    >
    </
    html
    >

  4. הפעל את הדף בדפדפן. הדף מוצג והוידאו מוצג באופן אוטומטי.

    Video.Flash

ניתן להגדיר את הפרמטר quality עבור ה- Flash ל: low , autolow , autohigh , medium , high , ו- best :

@Video.Flash(path: "Media/sample.swf", quality: "autohigh")

ניתן לשנות את ה- Flash לנגן בגודל מסוים באמצעות הפרמטר scale, שבו אתה יכול להגדיר את הפעולות הבאות:

· showall - זה גורם לווידאו כולו להיות גלוי, תוך שמירה על יחס הממדים המקוריים.

  • exactfit - זה גורם לווידאו כולו להיות גלוי, ללא שמירה על יחס הממדים המקוריים, בעיות עיוות בפרופורציה עלולות להיגרם.
  • noorder - זה גורם לווידאו להיות ביחס הממדים המקוריים, אבל זה עשוי לחתוך אותו.

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

@Video.Flash(path: "Media/sample.swf",
             width: "1000", height: "100",
             scale: "exactfit")

Flash Player תומך במצב וידאו בשם windowMode . אתה יכול להגדיר את מאפיין זה ל- window , opaque , או transparent .

· window - מוגדר כברירת המחדל של windowMode, מציג את הוידאו בחלון נפרד בדף האינטרנט.

· opaque - מסתיר את כל מה שמאחורי הווידאו בדף.

· transparent - מאפשר לראות את הרקע של הדף דרך הווידאו, בהנחה שחלק מהוידאו שקוף.

ניגון סרטונים של MediaPlayer

ההליך הבא מראה לך איך לנגן Window Media Video בשם sample.wmv מתיקיית Media.

  1. הוסף לאתר שלך את החבילה:  ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
  2. צור דף חדש בשם MediaPlayerVideo.cshtml.
  3. החלף את הקוד הקיים בדף בקוד הבא:
    <!DOCTYPE html>
    <
    html
    >
    <
    head>
      <title>MediaPlayer Video</title
    >
    </
    head
    >
    <
    body>
      @Video.MediaPlayer(
            path: "Media/sample.wmv",
            width: "400",
            height: "600",
            autoStart: true,
            playCount: 2,
            uiMode: "full",
            stretchToFit: true,
            enableContextMenu: true,
            mute: false,
            volume: 75)
    </body
    >
    </
    html
    >

  4. הפעל את הדף בדפדפן. הוידאו נטען ומנגן באופן אוטומטי.

    Video.MediaPlayer

באפשרותך להגדיר את הפרמטר playCount למספר שלם המציין כמה פעמים להפעיל את הווידאו אוטומטית:

@Video.MediaPlayer(path: "Media/sample.wmv", playCount: 2)

הפרמטר uiMode מאפשר לך לציין אילו פקדים יופיעו בממשק המשתמש. באפשרותך להגדיר את uiMode ל- invisible , none , mini , או full . אם לא תציין פרמטר uiMode , הווידאו יוצג עם שורת מצב, סרגל ניווט, כפתורי שליטה ובקרת עוצמה. בקרות אלה יוצגו גם אם אתה משתמש בנגן כדי להפעיל קובץ שמע. הנה דוגמה של אופן השימוש uiMode פרמטר:

@Video.MediaPlayer(path: "Media/sample.wmv", uiMode: "mini")

כברירת מחדל, השמע מופעל בעת הפעלת הווידאו. אתה יכול להשתיק את השמע על ידי הגדרת פרמטר mute ל- true:

@Video.MediaPlayer(path: "Media/sample.wmv", mute: true)

ניתן לשלוט על רמת השמע של MediaPlayer על ידי הגדרת פרמטר volume לערך בין 0 ל 100. ערך ברירת המחדל הוא 50. הנה דוגמה:

@Video.MediaPlayer(path: "Media/sample.wmv", volume: 75)

ניגון Silverlight

הליך זה מראה לך איך לנגן תוכן וידאו הכלול בקובץ xap של Silverlight בדף, בתיקייה בשם Media.

  1. הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
  2. צור דף חדש בשם SilverlightVideo.cshtml.
  3. החלף את הקוד הקיים בדף בקוד הבא:
    <!DOCTYPE html>
    <
    html
    >
    <
    head>
      <title>Silverlight Video</title
    >
    </
    head
    >
    <
    body>
      @Video.Silverlight(
            path: "Media/sample.xap",
            width: "400",
            height: "600",
            bgColor: "red",
            autoUpgrade: true)
    </body
    >
    </
    html
    >

  4. הפעל את הדף בדפדפן.

    Video.Silverlight

ליאור זמיר, ג'ון ברייס הדרכה

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.
לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.
תגיות: ASP.NET‏  /  CSHTML‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות