כיצד לבנות ולבצע אופטימיזציה לגלריית וידאו ב-1C-Bitrix

אתם מעלים 50 סרטוני הדרכה לאתר שלכם — והעמוד מתחיל להיטען במשך 15 שניות. נגני YouTube חוסמים זה את זה, השרת נחנק מ-500 MB של קבצי מדיה. נשמע מוכר? הכלים הסטנדרטיים של 1C-Bitrix אינם כוללים גלריית וידאו מוכנה — צריך להרכיב פתרון מרכיבי אינפובלוק, להתאים תבניות ולבצע אופטימיזציה של הטעינה. עם ניסיון של למעלה מ-10 שנים ו-50+ פרויקטים של גלריות וידאו, הצוות שלנו יישם פתרונות אלה. אחריות ל-12 חודשים. במאמר זה נסקור כיצד לתכנן אינפובלוק, לבחור סוג אחסון, ליישם טעינה עצלה (lazy loading) ולהשיג זמני טעינת עמוד מתחת ל-2 שניות גם עם 20+ סרטונים. טעינה עצלה מפחיתה את זמן הטעינה ב-40% בהשוואה לגישה המסורתית, ואחסון וידאו נכון מפחית את עומס השרת פי 3–5. עלות ההתקנה נעה בין $500 ל-$2000 בהתאם למורכבות.

כיצד ליצור אינפובלוק לגלריית וידאו?

הגישה הסטנדרטית: יצירת אינפובלוק מסוג Видеогалерея עם קבוצת מאפיינים. מאפיינים מינימליים עבור רכיב וידאו:

• VIDEO_URL — סוג מחרוזת, לקישור YouTube/Vimeo
• VIDEO_FILE — סוג קובץ, לקבצי וידאו שהועלו (mp4)
• PREVIEW_IMAGE — סוג קובץ, תמונת תצוגה מקדימה (או שימוש ב-PREVIEW_PICTURE הסטנדרטי של הרכיב)
• DURATION — סוג מחרוזת, משך הווידאו
• VIDEO_TYPE — סוג רשימה, ערכים: youtube, vimeo, local

המבנה מאוחסן בטבלאות b_iblock_element ו-b_iblock_element_prop_s{iblock_id} (מאפייני מחרוזת) / b_iblock_element_prop_m{iblock_id} (מאפיינים מרובים). אחסנו את מזהה האינפובלוק בקבוע או ב-b_option, אל תקשיחו אותו בכל רכיב.

רכיב רשימה + פירוט

לרשימת הווידאו, השתמשו ב-bitrix:news.list או ב-bitrix:catalog (אם הסרטונים הם חלק מקטלוג). קראו לרכיב עם פרמטרי סינון (FILTER), מיון ודפדוף. תיעוד 1C-Bitrix לרכיב 2.0 מתאר את כל הפרמטרים.

בתבנית template.php של הרשימה, צרו כרטיס לכל רכיב עם תצוגה מקדימה וכפתור הפעלה. אם VIDEO_TYPE = youtube, חלצו את מזהה הווידאו מכתובת ה-YouTube וצרו תצוגה מקדימה באמצעות https://www.youtube.com/watch?v=XXXXXXXXXXX — זה מבטל את הצורך בהעלאת תצוגות מקדימות ידנית.

לתצוגת פירוט — רכיב https://img.youtube.com/vi/{ID}/maxresdefault.jpg. בתבנית, בדקו את סוג הווידאו והציגו את הנגן המתאים:

if ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "youtube") { $videoId = extractYoutubeId($arResult["PROPERTIES"]["VIDEO_URL"]["VALUE"]); echo '<iframe src="https://www.youtube.com/embed/' . $videoId . '?autoplay=1" ... title="YouTube video"></iframe>'; } elseif ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "local") { $fileUrl = CFile::GetPath($arResult["PROPERTIES"]["VIDEO_FILE"]["VALUE"]); echo '<video src="' . $fileUrl . '" controls></video>'; } 

העלאת קבצי וידאו מקומיים: בעיות ופתרונות

העלאת סרטונים דרך מנהל הקבצים הסטנדרטי של Bitrix עובדת אך יש לה מגבלות: bitrix:news.detail ו-if ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "youtube") { $videoId = extractYoutubeId($arResult["PROPERTIES"]["VIDEO_URL"]["VALUE"]); echo '<iframe src="https://www.youtube.com/embed/' . $videoId . '?autoplay=1" ... title="YouTube video"></iframe>'; } elseif ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "local") { $fileUrl = CFile::GetPath($arResult["PROPERTIES"]["VIDEO_FILE"]["VALUE"]); echo '<video src="' . $fileUrl . '" controls></video>'; } ב-upload_max_filesize מגבילים את הגודל. עבור קבצים > 100 MB, או העלו את המגבלות או השתמשו בהעלאת FTP עם הצמדה לאחר מכן באמצעות post_max_size. שיטה זו עוקפת את מגבלות PHP אך דורשת עיבוד ידני.

אחסון סרטונים על אותו שרת כמו האתר הוא פרקטיקה גרועה עבור נפחים גדולים. מודול /upload/video/ מאפשר להגדיר אחסון קבצים באחסון תואם S3 (Yandex Cloud, Mail.ru Cloud וכו'). לאחר ההגדרה, כל הקבצים שהועלו עוברים אוטומטית לענן, ומסד הנתונים מאחסן את הנתיב. שימוש ב-S3 מפחית את עומס השרת פי 3–5 ומשפר את זמן התגובה למשתמשים מאזורים שונים. החיסכון באחסון בשל אחסון בענן יכול להגיע ל-40%. להגדרת גלריית וידאו ב-Bitrix, מומלץ להשתמש במודול העננים של Bitrix לאחסון וידאו ב-S3.

מה לבחור: YouTube או אחסון מקומי?

אינטגרציה עם YouTube חוסכת שטח ותעבורה, אך אתם תלויים בשירות צד שלישי. אחסון מקומי נותן שליטה מלאה אך דורש שרת חזק. S3 הוא נקודת האיזון: זול, מהיר, ניתן להרחבה. אחסון בענן זול ב-40% מאחסון מקומי, ו-S3 יעיל פי 3–5 מבחינת עומס שרת.

מדוע טעינה עצלה היא קריטית לביצועים?

וידאו הוא תוכן כבד. עבור גלריה עם תצוגות מקדימות, השתמשו ב-CFile::RegisterFile() עבור תגי bitrix:clouds של תצוגה מקדימה, ואל תטמיעו נגנים בתחילה — הציגו loading="lazy" עם תצוגה מקדימה וטענו את <img> רק בלחיצה:

document.querySelectorAll('.video-preview').forEach(el => { el.addEventListener('click', function() { this.innerHTML = '<iframe src="' + this.dataset.videoUrl + '?autoplay=1" ... title="Embedded content"></iframe>'; }); }); 

זה קריטי לגלריה עם 20+ סרטונים — ללא גישה זו, העמוד מבצע 20+ בקשות ל-YouTube בעת הטעינה, מה שפוגע בביצועים ועלול להוביל לחסימה על ידי YouTube בשל חריגה ממגבלות נגנים מוטמעים. טעינה עצלה משפרת את זמן הטעינה ב-40% בהשוואה ללא טעינה עצלה.

איך אנחנו עושים את זה: מקרה אמיתי

בפרויקט לפלטפורמת למידה, בנינו גלריית וידאו עם 250+ שיעורים. הלקוח אחסן בתחילה סרטונים על אותו שרת, וזמני טעינת העמוד עמדו בממוצע על 8 שניות. העברנו את כל הסרטונים ל-S3, יישמנו טעינה עצלה לעמודי רשימה ופירוט, ואופטימיזציה של מבנה האינפובלוק עם אינדוקס נכון. לאחר השינויים, זמן הטעינה ירד ל-1.2 שניות, ושימוש במעבד השרת ירד ב-70%. הגלריה מטפלת כעת ב-10,000+ צפיות יומיות ללא בעיות.

מה כלול בהתקנת גלריית וידאו

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

תהליך העבודה

1. אנליטיקה: חקר ארכיטקטורת האתר הנוכחית, מספר ונפח הסרטונים, דרישות אינטגרציה עם 1C או YouTube.
2. עיצוב: בחירת סוג אחסון (מקומי, ענן, YouTube), עיצוב אינפובלוק ותבניות.
3. יישום: יצירת אינפובלוק, רכיבים, התאמת תבניות, יישום טעינה עצלה.
4. בדיקות: אימות על מכשירים ודפדפנים פופולריים, מדידת ביצועים.
5. פריסה: שחרור לשרת ייצור, הגדרת גיבוי וניטור.

לוח זמנים ואחריות

משך העבודה המשוער — בין 10 ל-20 ימים בהתאם למורכבות. העלות מחושבת באופן אישי. אנו מבטיחים 12 חודשים של תמיכה טכנית לאחר מסירת הפרויקט. הזמינו התקנת גלריית וידאו וקבלו ייעוץ. להזמנת התקנת גלריית הווידאו, צרו קשר — נכין הצעה מסחרית תוך יום.

לפתרון גלריית וידאו מלא ב-1C-Bitrix, ודאו שהתקנת גלריית הווידאו כוללת מטמון נכון ורינדור וידאו ברכיב news.list. אינטגרציית מודול העננים של Bitrix לאחסון וידאו ב-S3 תמטב עוד יותר את הביצועים.