לאחרונה אנו לומדים את השימוש בוידאו במקום באנימציה ובווידאו במקום באנימציה של ספרייט. אנו מכנים סוג זה של וידאו אינטראקטיבי.
אנימציה ספרייט מסורתית: שטח דיסק גדול, הורדה איטית, במיוחד השמעה מקוונת, יהיה איטי יותר
יותר מדי קבצים, יותר מדי בקשות http בעת משחק מקוון, יגרמו לתגובה איטית או להתנהגות חריגה. לכן, יש צורך דחוף בפיתוח מערך טכנולוגיה להחלפת אנימציה של ספרייט בוידאו. אנו מכנים סוג זה של סרטון ווידיאו אינטראקטיבי
בעיות בסרטון מסורתי:
1. ניתן לשחק רק באזור בצורת ריבוע
2. מתחת לאייפד, זה חלון לשחק, ומתחת האייפון ניתן לשחק רק במסך מלא.
3. כשמשחקים הוא בהחלט יופיע בקדמת הבמה
לסרטון אינטראקטיבי המאפיינים הבאים:
תחת ה- iPhone, אין צורך בהפעלת מסך מלא, ניתן להפעיל אותו באזור אחד
וידאו אינטראקטיבי יכול להופיע מתחת לאובייקטים גרפיים רגילים
לסרטון אינטראקטיבי יכולה להיות מסיכה, כך שניתן להסיר את הרקע של הווידאו ולשלב את הווידאו ואת האובייקטים הגרפיים הרגילים
סיכום: עבור הסרטון המשמש לנגינה, נגדיר אותו כסרטון מסורתי. לסרטונים שיש להשתמש בהם למטרות ספציפיות, אנו מגדירים אותם כסרטונים אינטראקטיביים. המחקר הניב תוצאות ראשוניות. אגב, הוא מסכם את הבעיות האמיתיות בהן נתקלים בפיתוח השמע והווידיאו של ה- H5 הנייד בשנים הקרובות ומספק פתרונות משלו. התבונן בהשפעה הסופית בפועל: תואם למחשב (> IE9), אייפון, אייפד, אנדרואיד 5.0
לפתור את הבעיות של ידני, אוטומטי, חלונות על iPhone, וזה יכול בעצם לשמש בייצור בפועל. מימין נמצא קובץ ה- MP4 המקורי של הווידאו, הסרטון משמאל מחליף את האנימציה ואז תומך באפקט מסיכת הרקע, יכול לחשוף את מפת הבסיס ותומך בסדרה של פעולות אינטראקטיביות.
שמע H5
בכל פעם שאובייקט שמע מועבר דרך אודיו חדש, ניתן לראות שרשור חדש ב- IOS.
פתרון: אובייקט שמע חדש, על ידי החלפת כתובות שמע שונות, משיג את המטרה לא לפתוח עוד שרשורים.
התמיכה אינה טובה באנדרואיד
פתרון: הבעיה בגירסה התחתונה של Android אינה נפתרת. באופן כללי, ניתן לטפל בפיתוח מעורב על ידי התאמת הממשק הבסיסי, כגון phonegap
לא ניתן להפעיל אוטומטית ב- iPhone
פתרון: השמעה אוטומטית ב- iPhone היא תהליך שנעשה כאשר תוכנת ה- IOS תוכננה. נראה שזה מונע גניבה אוטומטית של תנועה.
במילים פשוטות, יש להפעיל אותו באופן ידני על ידי הדמיית המשתמש, לכן עלינו להתקשר לפיסת הקוד הזו בהתחלה:
העתק קוד
// תקן את הבעיה שדפדפן iOS אינו יכול להשמיע אודיו באופן אוטומטי. צור אודיו חדש בעת הטעינה והחלף את src בעת השימוש בו.
Xut.fix = Xut.fix || {};
אם (Xut.plat.is דפדפן && Xut.plat.isIOS) {
var isAudio = שקר
var fixaudio = פונקציה () {
אם (! isAudio) {
isAudio = נכון;
Xut.fix.audio = שמע חדש ();
document.removeEventListener ('מגע התחלה', fixaudio, false);
}
};
document.addEventListener ('touchstart', fixaudio, false);
}
העתק את הקוד לעיל
אם אתה קושר קוד כזה לגוף: צור אובייקט שמע על ידי הפעלתו באופן ידני, ואז שמור אותו בגלובלי
בשימוש כדלקמן:
העתק קוד
// אם אתה משתמש ב- Xut.fix.audio כדי לציין src לדפדפן ios, עיין ב- app.js לאתחול
אם (Xut.fix.audio) {
אודיו
=
Xut.fix.audio;
audio.src = כתובת אתר;
אחר} {
שמע = שמע חדש (url);
}
audio.autoplay = true;
audio.play ();
כל שעליך לעשות הוא להחליף את אובייקט השמע. במילים פשוטות, זה חייב להיות האובייקט שנוצר על ידי הדק המשתמש כדי לשחק.
אודיו וידאו H5
לעתים רחוקות ניתן להשתמש בתגיות וידאו במסוף הנייד, תמיכת Android גרועה מדי, מבחינה ויזואלית 5.0 עדיף. לא ניתן להפעיל את הבעיה הישנה באייפון באופן אוטומטי (שמור נתונים, שמור את אחותך !!!), וברירת המחדל היא שליטה במסך מלא להפעלה. במשך זמן רב התעלמתי מעיבוד הווידאו הזה. אנדרואיד משתמשת בשכבה התחתונה, אייפון משתמש ישירות ב- VideoJS, הפלאש המובנה ומתג h5, לפלאש יש גם בעיות תמיכה. לפני זמן מה הייתה לבוס דרישה. יישמנו יותר מדי אנימציות, כולן היו אנימציות משולבות של מסלולי ספרייט, שנעות בין מאות מגה-בייט למאות מגה-בייט תחת אפליקציה אחת, כך שיש צורך דחוף בפתרון לדחיסת תמונות. הפיתרון הסופי הוא שימוש בווידאו במקום באנימציה, מכיוון שטכנולוגיית דחיסת הווידיאו פותחה שנים רבות והייתה בשלה מאוד. עכשיו טכנולוגיית דחיסת וידאו יכולה להמיר בקלות 720P. סרטים בחדות גבוהה, דחוסים ל- 10M / min, או 160K / sec. גודל הקובץ של רצף התמונה קטן לפחות כמה עשרות מונים. יחד עם זאת, מרבית המכשירים תומכים בשחרור חומרה של וידאו, כך שצריכת המעבד של הפעלת הווידאו נמוכה מאוד, צריכת הסוללה גם היא נמוכה מאוד ומהירות ההפעלה גם מהירה. אפילו השמעה במסך מלא של 25 פריימים ניתנת להשגה בקלות.
התוכנית מסתיימת, וכמה בעיות שיש לפתור כאן.
הסרטון כולו, כולל כמה אובייקטים בסרטון, יכול להגיב ללחיצות משתמשים, שקופיות ופעולות אחרות מתחת לאייפון, ניתן להפעיל אותו בחלון, יכול לסנן את הרקע ולהשתמש בו כמו תמונת PNG. הסרטון מחליף את האנימציה, ואז תומך באפקט מסיכת הרקע, שיכול לחשוף את תמונת הבסיס, וגם פותר את בעיית המסך הידני, האוטומטי והמסך.
חלונות iPhone
פתרון: שלב עיבוד באמצעות תווי בד + סרטונים
עקרון: השג את מסגרת התמונה המקורית של הסרטון וצייר אותה לדף באמצעות קנבים
כאן אני מצרף ישירות את קוד המקור, הקוד כתוב באופן כללי, אך מדגיש כמה נקודות מפתח
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
וידאו במקום אנימציה
זה קצת מסורבל. זה צריך להיות אינטראקטיבי ולגרור את הבד כדי להשיג את מטרת השליטה בתמונה. עדיין לא סיימתי לכתוב את כל זה, ולצרכים הכלליים של החברה לא יהיה את זה. הנה תיאור קצר, הוא מעובד גם על ידי canvas + video, אך נדרש מיכל בד במטמון לצורך עיבוד מקדים. באמצעות עיבוד מקדים, קבלו את הפיקסלים של כל תמונה, ועל ידי שינוי הערך של כל RBG של פיקסל, הוא יכול לסנן את הרקע, כך שהוא יכול לשמש כמו תמונת PNG. אני אכתוב את זה אחר כך ואפרסם ~ ~
המוצר השני שלנו:
