וידאו באתרי וורדפרס – עצירת וידאו מחוץ ל Viewport

נכון יהיה להפסיק ניגון וידאו באתרי וורדפרס כאשר אלו מחוץ ל Viewport

בפרוייקט האחרון שלי, הייתה דרישה לשימוש במספר לא מועט של סרטונים (וידאו) בעמודים מסויימים. חלק מאותם סרטונים נדרשו להיות במסך מלא וחלקם קטנים יותר הנמצאים בקונטיינר מסויים. הוספה של וידאו ב HTML5 פשוטה למדי ע״י שימוש ב video תג.

הבעיה עם מספר מרובה של סרטונים

תוך כדי עבודתי על האתר שמתי לב כי הלפטופ שלי (שאיני מזלזל ביכולתיו) מאד מתאמץ. המאווררים החלו להסתובב במהירות, המחשב התחמם והכל החל להגיב נורא לאט. בדיקה זריזה ב Task Manager של כרום הראתה כי אותו טאב, הפתוח על עמוד מסויים באתר ובו מספר סרטונים, לוקח כ 50% ממשאבי המעבד (CPU). תחילה חשבתי כי ישנה בעיה כלשהי באחד מקבצי ה Javascript שכתבתי אך התברר לי כי אין זה המצב. סרטונים או HTML5 Videos צורכים משאבים רבים מהמעבד, בטח אם הם מוצגים במסך מלא.

צריכת משאבים ללא הפסקת וידאו

האתגר

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

על הדרך, הצטרפו לרשימת התפוצה !

הפתרון

חיפוש אחר פתרון הוביל אותי לפלאגין jQuery מאד קליל אשר יודע לומר לנו האם אלמנט מסויים נמצא כרגע ב Viewport. פלאגין זה נקרא isInViewport.js. הורידו את הפלאגין והוסיפו את הקובץ isInViewport.js לספריית ה Javascript בתבנית הבת שלכם. לאחר מכן הוסיפו את הקוד הבא לקובץ functions.php על מנת לטעון את הפלאגין:

שימו לב שהוספנו array( 'jquery' ) כפרמטר לפונקציה על מנת לוודא כי אנו טוענים את הפלאגין רק לאחר ש jQuery נטען אחרת נקבל שגיאה.

לאחר מכן אתחלו את הפלאגין על ידי הוספת הקוד הבא היכן שאתם מוסיפים Javascript באתר וורדפרס שלכם:

זהו בעצם, כל וידאו (HTML5 Video) באתר יפסיק לנגן ברגע שיהיה מחוץ ל Viewport והשימוש במשאבים של המעבד יירדו פלאים. ראו את צריכת המשאבים במעבד לאחר השימוש בפלאגין – ירידה של כ 50 אחוזים:

צריכת משאבים לאחר הפסקת וידאו

יש לכם עוד רעיונות לאופטימזציה של וידאו באתרי וורדפרס? אשמח אם תשתפו אותנו בתגובות… 🙂

רועי יוסף

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

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

{ 0 תגובות… הוסף אחת }

השאירו תגובה

כבר הולכים ? הרשמו לרשימת התפוצה !

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

לעולם לא נשתף את הפרטים שלכם...

קראו גם את:
לעכב פריסת Javascript באתר וורדפרס
כיצד לעכב פריסת Javascript באתר וורדפרס ולשפר את זמן הטעינה?

סגור