ما هو Picture-in-Picture (PiP)؟

Picture-in-Picture هي ميزة متصفح تتيح لك إخراج فيديو من علامة التبويب الحالية إلى نافذة عائمة صغيرة تبقى فوق كل شيء آخر على شاشتك. يمكنك نقلها إلى أي مكان وتغيير حجمها والاستمرار في المشاهدة أثناء تصفح علامات تبويب أخرى أو كتابة المستندات أو القيام بأي شيء آخر على جهاز الكمبيوتر الخاص بك — يبقى الفيديو مرئياً طوال الوقت.

يتم دمج PiP في جميع متصفحات سطح المكتب الحديثة (Chrome و Edge و Firefox و Safari) من خلال واجهة برمجية ويب موحدة. لا يتطلب ملحقات أو إضافات، والنافذة العائمة يتم إدارتها بالكامل من قبل نظام التشغيل، لذا تبقى موجودة حتى عند التبديل بين التطبيقات.

وصف الأداة

تحمل هذه الأداة أي عنوان URL فيديو مباشر إلى مشغل HTML5 وتتيح لك تشغيله في وضع Picture-in-Picture بنقرة واحدة. الصق رابطاً إلى ملف فيديو يمكن الوصول إليه علناً وحمّله واضغط على "تشغيل Picture-in-Picture" لفصل الفيديو إلى نافذة تراكب عائمة.

الصيغ المدعومة

أي صيغة فيديو يدعمها مشغل HTML5 الأصلي في متصفحك:

  • MP4 (H.264 / H.265) — مدعوم عالمياً
  • WebM (VP8 / VP9 / AV1) — مدعوم في Chrome و Firefox و Edge
  • OGG / OGV (Theora) — مدعوم في Firefox و Chrome
  • MOV — مدعوم في Safari؛ دعم محدود في أماكن أخرى
  • M4V — مدعوم في معظم متصفحات Chromium و Safari

يجب تقديم ملف الفيديو عبر HTTP/HTTPS ويجب أن يسمح الخادم بطلبات cross-origin (CORS) لكي يتمكن المتصفح من تحميله.

كيفية العمل

  1. يتم تحميل عنوان URL الذي تدخله كـ src لعنصر HTML5 <video> قياسي.
  2. عند النقر على "تشغيل Picture-in-Picture"، يستدعي المتصفح واجهة برمجية requestPictureInPicture() الأصلية على هذا العنصر.
  3. يفصل المتصفح الفيديو إلى نافذة عائمة يديرها مدير نوافذ نظام التشغيل.
  4. النقر على "إغلاق Picture-in-Picture" (أو زر الإغلاق على النافذة العائمة) يستدعي exitPictureInPicture() ويعيد الفيديو إلى المشغل.

الميزات

  • تشغيل وإغلاق PiP بنقرة واحدة مباشرة من المتصفح — لا حاجة لملحقات
  • يعمل مع أي عنوان URL فيديو مباشر يمكن الوصول إليه علناً
  • مشغل بنسبة عرض إلى ارتفاع 16:9 مع عناصر تحكم أصلية كاملة (تشغيل وإيقاف والبحث والصوت وملء الشاشة)
  • يبدأ التشغيل تلقائياً قبل الدخول إلى PiP حتى لا يتجمد الفيديو
  • يكتشف ما إذا كان PiP غير مدعوم في المتصفح الحالي ويعرض رسالة واضحة

حالات الاستخدام

  • شاهد فيديو تعليمي في نافذة عائمة أثناء المتابعة في محرر أكواد أو علامة تبويب متصفح أخرى
  • راقب بث مباشر أو تغذية فيديو مسجلة أثناء العمل في تطبيقات أخرى
  • احتفظ بمرجع فيديو مرئي أثناء تحرير المستندات أو جداول البيانات أو ملفات التصميم

القيود

  • يجب أن يسمح خادم الفيديو بجلب الملف من أصل مختلف (مطلوب رؤوس CORS). تفعل العديد من شبكات توصيل المحتوى وخوادم الملفات المباشرة هذا بالفعل؛ البعض لا يفعل.
  • PiP غير متاح في جميع المتصفحات — لا سيما بعض متصفحات الهاتف المحمول والإصدارات الأقدم من سطح المكتب لا تدعم واجهة برمجية.
  • صيغ قوائم التشغيل المتدفقة مثل HLS (.m3u8) و DASH (.mpd) غير مدعومة مباشرة؛ فقط عناوين URL التنزيل التدريجي تعمل.

الأسئلة الشائعة

لماذا فشل تحميل الفيديو؟ قد لا يتضمن الخادم الذي يستضيف الفيديو رأس Access-Control-Allow-Origin الذي يسمح بالتحميل من أصل مختلف، أو قد يتطلب عنوان URL مصادقة. جرب رابطاً عاماً مباشراً إلى ملف فيديو.

لماذا زر PiP معطل؟ تحتاج إلى تحميل فيديو أولاً بإدخال عنوان URL والنقر على "تحميل الفيديو". يصبح الزر نشطاً بمجرد تعيين مصدر.

هل يعمل هذا على الهاتف المحمول؟ واجهة برمجية Picture-in-Picture لها دعم محدود على متصفحات الهاتف المحمول. على iOS، يدعم Safari PiP للفيديوهات لكن السلوك قد يختلف. على Android، قد يدعمه Chrome حسب الإصدار وإعدادات نظام التشغيل.