מדריך CSHTML – עבודה עם וידאו
יש לך וידאו? אם כן, קל להציג אותו בדף אינטרנט. שפת 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. זמין באותה תיקייה.
- הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
- באתר, הוסף דף בשם FlashVideo.cshtml.
- החלף את הקוד הקיים בדף בקוד הבא:
<!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> - הפעל את הדף בדפדפן. הדף מוצג והוידאו מוצג באופן אוטומטי.
ניתן להגדיר את הפרמטר 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.
- הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
- צור דף חדש בשם MediaPlayerVideo.cshtml.
- החלף את הקוד הקיים בדף בקוד הבא:
<!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> - הפעל את הדף בדפדפן. הוידאו נטען ומנגן באופן אוטומטי.
באפשרותך להגדיר את הפרמטר 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.
- הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
- צור דף חדש בשם SilverlightVideo.cshtml.
- החלף את הקוד הקיים בדף בקוד הבא:
<!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> - הפעל את הדף בדפדפן.
תגובות בפייסבוק