הצגת סרט וידאו

בלי כתוביותעם כתוביות

מילון מושגים:

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

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

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

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

מחרוזת - סוג נתונים שמייצג רצף של תווים, כלומר טקסט, ומשמש לאחסון מילים, משפטים או כל רצף סימנים.

Android - מערכת הפעלה מבוססת Linux לטלפונים ולמכשירים ניידים, שפותחה על ידי גוגל.

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

ממשק - נקודת מגע בין רכיבים: ממשק משתמש שבו אדם מפעיל תוכנה, או ממשק תכנותי שמגדיר אילו פעולות רכיב אחד חושף לאחר.

הצגת סרט וידאו

הצגת וידאו מבוצעת בעזרת MediaPlayer ביחד עם SurfaceView, באותה גישה שנעשתה במצלמה. בונים רכיב ויזואלי משלנו, VideoSurfaceView, שמנגן קובץ וידאו מתוך המשאבים.

השלבים העיקריים

1. המחלקה: יורשת מ-SurfaceView, ומחזיקה SurfaceHolder ו-MediaPlayer. הקונסטרקטור מקבל Context ו-AttributeSet ומעביר אותם ל-super, כדי שאפשר יהיה להציב אותה ב-Layout. אחר כך מקבלים את ה-holder עם getHolder() ונרשמים עם addCallback.

2. surfaceCreated: כאן יוצרים new MediaPlayer, מגדירים setAudioStreamType(AudioManager.STREAM_MUSIC) ו-setDisplay(holder) כדי שהווידאו ישודר ל-holder, ו-setDataSource עם קונטקסט ו-URI.

3. URI של משאב: המחרוזת מתחילה ב-android.resource://, ממשיכה בשם החבילה של האפליקציה (getPackageName()), אחריה סלש ו-R.raw.<שם הקובץ>. הקובץ לדוגמה, bigbackbunny, נמצא ב-res/raw. הכול בתוך try/catch.

4. prepare: קוראים ל-prepare כדי להכין את הווידאו. הפונקציות play, pause ו-stop של הרכיב קוראות ל-start, pause ו-stop של ה-MediaPlayer. את הווידאו הגדירו כאן בפנים לשם הפשטות, כי האתחול חייב להיות ב-surfaceCreated.

5. שילוב: מציבים את VideoSurfaceView ב-Layout עם match_parent ו-ID, מאתרים אותו ב-MainActivity וקוראים לשלוש הפונקציות מהלחצנים.

בעיות ותיקונים

1. אחרי Stop, Play לא עובד: פותרים עם רענון של ה-SurfaceView. ב-stop מסתירים אותו (setVisibility(GONE)) ומציגים שוב (VISIBLE), כך שהאתחול רץ מחדש.

2. לחיצה לפני שהרכיב מוכן: prepare עלול לתקוע את הממשק, ולכן מחליפים אותו ב-prepareAsync שרץ ברקע. כדי לדעת מתי אפשר ללחוץ, נרשמים ל-setOnPreparedListener.

3. Listener חיצוני: מגדירים ממשק OnStatusChangeListener עם onInitializing, onPrepared ו-onError, ופונקציית setOnStatusChangeListener. MainActivity מממשת אותו, מכבה את שלושת הלחצנים ב-onInitializing (setEnabled(false)), מפעילה אותם ב-onPrepared, ומציגה Toast בשגיאה.

המרצה העיר שכדאי להציג למשתמש הודעה כללית ולא את הודעת השגיאה של המערכת.

כעת אפשר להציג וידאו מקומי עם Play, Pause ו-Stop, ולמנוע לחיצה לפני שהוא מוכן.

השיעור הבא בקורס: הצגת סרט וידאו אונליין

פרקי ההרצאה: הצגת סרט וידאו

תמלול ההרצאה: הצגת סרט וידאו

הטקסט המלא של הדקות הראשונות בהרצאה «הצגת סרט וידאו» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

00:02
בנושא המדיה אנחנו מגיעים להצגת וידאו ואנחנו הולכים להציג וידאו בעזרת רכיב המדיה פלייר בתשלובת עם רכיב ה-surface view שראינו בעבר בנושא הקאמרה.
00:16
רכיב ה-surface view מאפשר לנו להציג תמונה או מצלמה או וידאו ואנחנו צריכים גם את רכיב המדיה פלייר בשביל להצליח להציג את הוידאו בתוך ה-surface holder שראינו בעבר.
00:32
אז בואו נראה איך כל הסיפור הזה מתבצע. הדבר הראשון שאנחנו צריכים לעשות זה להוסיף מחלקה כי אנחנו כבר בדוגמה הזאת מההתחלה הולכים לעשות את זה בעזרת מחלקה נפרדת כאילו אנחנו פותחים איזשהו רכיב חדש נקרא לו video surface view אנחנו רוצים לרשת to extend את Surface View ואנחנו בעצם רוצים לבנות מעין רכיב חדש משלנו בכדי
01:04
להציג אותו על ה-Layout. אז קודם כל מה שאנחנו צריכים כאן בתוך הרכיב החדש שאנחנו בונים זה Object Private Surface Holder, נקרא לו פשוט Surface Holder ומי שלא זוכר או לא ראה את הסרטונים האלה שקשורים ב-surface view מומלץ ללכת לפרק על הקאמרה ועל צילום ועל הצגת מצלמה בתוך האפליקציה שלנו ולראות בדיוק
01:39
איך אנחנו השתמשנו עם רכיב ה-surface view והרבה עקרונות שאנחנו כבר השתמשנו בהם בעבר אנחנו ממש משתמשים איתם כאן בסרטון הזה. אנחנו פשוט בסרטון הזה מציגים וידאו ב-surface view.
01:52
והדבר הבא שאנחנו רוצים לעשות זה media player. הנה יש לנו פה את אובייקט המדיה פלייר בואו נבנה איזשהו קונסטרקטור public video surface view ובגלל שאנחנו בונים רכיב שהולך להיות מוצב על הלייאוט ישירות אנחנו רוצים קונטקסט הנה הקונטקסט והנה האטריביוט סט האטריביוט סט זה בעצם קבוצת האטריביוטס שמוגדרת בלייאוט עצמו
02:31
באזור שאנחנו מגדירים, נניח אם אנחנו בונים רכיב ואנחנו שמים אותו, אז הנה כל האטריביוטס שאנחנו מגדירים לו ואנחנו צריכים לקבל אותם לקונסטרקטור.
02:41
עכשיו אנחנו יכולים לקרוא ל-super, להעביר לו את ה-context ואת ה-attribute-set. בואו ניגש ל-surface-holder ונקרא ל-get-holder ובואו ניגש עוד פעם ל-surface-holder ונירשם ל-callbacks, כפי שעשינו בעבר, נגדיר כאן שאנחנו רוצים להירשם, נגדיר make video surface view implement
03:12
at surface-holder.callbacks ויש לנו את שלושת הפונקציות שעבדנו איתן בעבר. הנה אנחנו רואים פה את האינטרפייס והפונקציה הראשונה SurfaceCreated מתבצעת כאשר ה-surface מוצב על ה-Layout כאשר התוכנית רצה או כאשר מבצעים איזשהו Refresh.
03:34
Surface Change גם מתבצעת בהתחלה או שמשנים את ה-Dimension של ה-Surface ו-Surface Destroy מתבצעת כאשר ה-Surface נהרס גם כן ב-Refresh וגם כאשר האפליקציה מסתיימת.
03:48
מה אנחנו רוצים לעשות בתוך Surface Created? אנחנו רוצים ליצור את אובייקט ה-Media Player שלנו. אז בואו ניגש למדיה פלייר שווה והפעם אנחנו משתמשים בניו מדיה פלייר.
04:01
ניגש למדיה פלייר וניתן לו אודיו סטרים טייפ ואנחנו רוצים לתת אודיו מנג'ר נקודה סטרים מיוזיק. ראינו את זה כאשר השתמשנו ברכיב הסאונד פול. כאן בעצם אנחנו קובעים שאנחנו רוצים לבצע סטרימינג דרך הערוץ של המוזיקה.
04:27
ואנחנו רוצים לבוא ו-to display the video, אז בואו ניגש ל-media player, set display, ואנחנו אומרים לו, תקשיב, יש לנו פה את ה-surface holder, זה שמחזיק את התצוגה עצמה, ואנחנו רוצים שתשדר את הוידאו בדיוק ל-surface holder, ואז יראו את הוידאו על ה-surface view שלנו.
04:50
הדבר הבא שאנחנו רוצים זה לגשת ל-media הפלייר ולתת לו את הדאטה סורס שלנו, סט דאטה סורס ואנחנו צריכים לתת לו קודם כל קונטקסט אז הנה יש לנו פה את מיי אפ גט קונטקסט ואנחנו רוצים לתת לו את ה-URI לקובץ הוידאו, אפילו שזה קובץ וידאו מקומי ככה אנחנו עושים את זה.
05:16
אז מה ה-URI שלנו? בואו באמת נחלק את זה אולי לשתי פקודות, ניקח URI שווה URI נקודה פארס ופשוט נשלח כאן את ה-URI שהגדרנו ויש לנו כאן בתיקיית ה-raw data קובץ וידאו mp4 שנקרא big back bunny והקובץ הזה זה פשוט קובץ מאוד ידוע שמראה סרטון קצר של כמה שניות ואנחנו רוצים להגיד שזה בדיוק הסרטון שאנחנו
05:54
רוצים. איך אנחנו מבצעים את זה? אנחנו רושמים android.resource.slash וזה מתאר לאפליקציה ללכת לאזור ה-resources שלנו.
06:08
לאחר מכן אנחנו צריכים לשרשר את myapp.get.context.get.package.name. ככה המערכת תדע בדיוק ללכת לאפליקציה שלנו לפי ה-package ולא לאפליקציה אחרת.
06:26
לאחר מכן אנחנו משרשרים backslash ואת ה-ID של הוידאו r.row.bigbackbunny. וזה בעצם השיטה לגשת ולהביא קובץ וידאו שיושב לו ב-resources שלנו.
06:44
אנחנו צריכים לעטוף את כל הסיפור הזה ב-trycatch ויש לנו כאן טרייקאץ' שבהמשך אנחנו הולכים לדווח אקספשן במידה ואקספשן מתרחשת, אבל אם אנחנו כבר משתמשים בטרייקאץ' אז בואו נגדיר את הטריי מעל כל הסיפור הזה.
07:05
אני בדרך כלל לא אוהב לעשות טריי שעוטף כבר הכל, אם כבר. ויש לנו כאן את ה-surface created. ב-surface change אין לנו מה לעשות, ב-surface destroyed אין לנו מה לעשות, אפשר לצמצם טיפה שורות כאן, אפשר לצמצם גם את זה.
07:26
ואנחנו כן רוצים לבנות עוד שלוש פונקציות. הפונקציה הבאה שאנחנו רוצים לבנות זה פשוט play בכדי לבצע ניגון של הוידאו. בואו ניגש ונקרא ל-media player.start בואו ניקח את הפונקציית play, נשכפל אותה שלוש פעמים.
07:51
הפונקציה הבאה שאנחנו רוצים היא pause אז אנחנו קוראים למדיה player pause והפונקציה האחרונה זה stop ואנחנו קוראים למדיה player נקודה stop והסיבה שהגדרתי כאן את הוידאו ולא שלחתי אותו לפונקציית הפליי כך שהמיין אקטיביטי תוכל פשוט לספק את הוידאו זה בגלל שאנחנו חייבים לבצע את כל ההתחולים
08:21
האלה בsurface created אז אז ברור שאנחנו יכולים בצורה כלשהי לציין מהו הוידאו ואז להעביר את זה ל-surface created על ידי איזושהי פונקציה תתחול מסוימת, אבל כרגע בשביל הפשטות הגדרנו את הוידאו ממש כאן בשביל שיהיה כמה שפחות שינויים של דיזיין כאלה, רק לראות איך הכלים ממש עובדים.
08:46
אנחנו צריכים לבצע רק עוד דבר אחד בתוך ה-surface created וזה לבוא למדיה player ולקרוא לפונקציה שנקראת prepare.
08:58
פונקציית prepare מכינה את כל השידור של הוידאו ואנחנו צריכים לקרוא לה. אוקיי, אז כל מה שנשאר לנו לעשות זה פשוט לקרוא ל-play, pause ו-stop עבור רכיב view, video, סליחה, surface view, בואו נעתיק אותו, וניגש קודם ל-activity ול-layout ופשוט נציב
09:22
כאן למטה את הרכיב הזה, יש לנו פה את שלושת הלחצנים שעומדים מעל ואנחנו רוצים לבנות אובייקט מטיפוס video surface view. אתם רואים שהוא לא מוצא אותו, הנה הוא כן מוצא אותו כאן.
09:37
ניתן לו match parent ו-id אותו הרכיב פשוט עם v קטנה בהתחלה כמו המוסמך שלנו ואנחנו רוצים לגשת למיין אקטיביטי לאזור הגלובלי פרייבט הנה הרכיב שלנו בעצם פורסום עם V גדולה והנה האובייקט שלנו, אנחנו רוצים למצוא אותו, video surface view, find view by ID, RID, הנה מצאנו אותו ועכשיו שמצאנו אותו אנחנו יכולים לגשת ולקרוא לשלושת הפונקציות
10:23
שלו. הנה ה-play, בלחצן ה-pause הנה ה-pause ובלחצן ה-stop הנה הסטופ.
10:35
אוקיי, עכשיו אנחנו כבר יכולים לגשת ולבדוק את זה. בואו נריץ, האפליקציה עולה ואנחנו יכולים לבוא ולגשת וללחוץ על הלחצן פליי והנה אנחנו רואים את הוידאו על ה-surface view וגם שומעים אותו והוידאו מסתיים.
11:01
בואו נלחץ שוב, נעשה pause, play, pause, stop, play ושום דבר לא מתרחש. אנחנו צריכים לטפל פה במצב שטיפלנו בו בעבר לגבי ה-surface view בכדי לבצע איזשהו refresh ולטעון אותו מחדש.
11:25
דבר נוסף שיכול להיות זה שלוקח זמן לרכיב ה-surface view להיווצר וברגע כל עוד שהרכיב הזה לא נוצר אז אנחנו לא יכולים ללחוץ על הפליי, זאת אומרת לפעמים קורה שאנחנו מריצים את האפליקציה, הרכיב עדיין לא נוצר ואנחנו לא יכולים בזמן הזה ללחוץ על הפליי.
11:50
לצורך כך אנחנו צריכים להוסיף עוד איזשהו מנגנון שמדווח לנו מתי הרכיב כבר מוכן לשימוש. אז בואו ניגש ונראה כמה שינויים שאנחנו יכולים לבצע בכדי לא להיתקל בבעיות כאלה.
12:04
דבר ראשון אנחנו רואים שקראנו פה לפונקציה שנקראת פריפר. הפונקציה פריפר מה שהיא עושה היא בעצם מכינה את כל המדיה פלייר וטוענת את כל הוידאו אליה וזה יכול לקחת זמן.
12:20
ומה שקורה בזמן הזה זה שזה עוצר לנו את תאנת ה-UI את ממשק המשתמש. יש לנו עוד פונקציה שנקראת Prepare Async אם אנחנו קוראים לה אז בעצם כל הנושא של התאנה מתבצע ברקע בלי לתקוע את ה-UI וה-UI ממשיך והמשתמש יכול לראות לפחות משהו ותוך כדי