تقرير: رجاء عواض

.manar-video-wrapper{ الموضع: نسبي؛ العرض: 100%؛ } .manar-video-wrapper video{ عرض:block; العرض: 100%؛ الارتفاع: تلقائي؛ } .manar-play-btn{ الموضع:مطلق; اليسار:50%; أعلى:50%; تحويل:ترجمة(-50%,-50%)); العرض: 84 بكسل؛ الارتفاع: 84 بكسل؛ نصف قطر الحدود: 999 بكسل؛ الحدود:0؛ المؤشر:المؤشر؛ عرض: فليكس؛ محاذاة العناصر:مركز؛ ضبط المحتوى:مركز؛ الخلفية: var(–manar-yellow); مرشح الخلفية: طمس (2 بكسل)؛ الانتقال: العتامة .15 ثانية سهولة، التحويل .15 ثانية سهولة؛ مؤشر z: 2؛ } .manar-play-btn:hover{ تحويل:ترجمة(-50%,-50%) مقياس(1.04); } .manar-icon-play{ width:0;height:0; الحدود العلوية: 14 بكسل شفاف خالص؛ الحد السفلي: 14 بكسل شفاف خالص؛ الحدود اليسرى: 22 بكسل الصلبة #fff؛ الهامش الأيسر: 4 بكسل؛ } .manar-video-wrapper.is-playing .manar-play-btn{ opacity:0; أحداث المؤشر: لا شيء؛ } (function(){ // تجنب الربط المزدوج إذا كان السمة/المكون الإضافي يطبع رموزًا قصيرة بطرق غريبة if (window.__manarVideoInit) return; window.__manarVideoInit = true; function getWrapper(el){ return el ? el. Closest(“.manar-video-wrapper”) : null; } function getVideoFromWrapper(wrap){ return Wrap ? Wrap.querySelector(“video.manar-video”) : null } function setPlayingUI(wrap, isPlaying){ if(!wrap) return; Wrap.classList.toggle(“is-playing”, !!isPlaying); var btn = Wrap.querySelector(“.manar-play-btn”); “true” : “false”); } function togglePlay(video){ if(!video) return; if(video.paused || video.end) video.play(); else video.pause(); } // تفويض الحدث: يتعامل مع مقاطع فيديو متعددة + مقاطع فيديو تمت إضافتها ديناميكيًا document.addEventListener(“click”, function(e){ var btn = e.target. Closest && e.target. Closest(“.manar-play-btn”); // togglePlay(vid } }); // حافظ على مزامنة واجهة المستخدم لجميع مقاطع الفيديو (التقاط الأحداث في المتصفحات الحديثة) document.addEventListener(“play”، function(e){ if(e.target && e.target.matches && e.target.matches(“video.manar-video”)){ setPlayingUI(getWrapper(e.target), true); } }, true); document.addEventListener(“pause”, function(e){ if(e.target && e.target.matches && e.target.matches(“video.manar-video”)){ setPlayingUI(getWrapper(e.target), false); } }, true); document.addEventListener(“end”, function(e){ if(e.target && e.target.matches && e.target.matches(“video.manar-video”)){ setPlayingUI(getWrapper(e.target), false); } }, true); // تهيئة مقاطع الفيديو الحالية (في حالة تشغيل بعضها تلقائيًا أو إيقافها مؤقتًا) function initExisting(){ document.querySelectorAll(“.manar-video-wrapper”).forEach(function(wrap){ var video = getVideoFromWrapper(wrap); if(!video) return; setPlayingUI(wrap, !(video.paused || video.end)); } if(document.readyState === “loading”){ document.addEventListener(“DOMContentLoaded”, initExisting }else{ initExisting() } }();