Τι είναι το Picture-in-Picture (PiP);

Το Picture-in-Picture είναι μια δυνατότητα του περιηγητή που σας επιτρέπει να αποσπάσετε ένα βίντεο από την τρέχουσα καρτέλα σε ένα μικρό κυμαινόμενο παράθυρο που παραμένει πάνω από όλα τα άλλα στοιχεία της οθόνης σας. Μπορείτε να το μετακινήσετε οπουδήποτε, να αλλάξετε το μέγεθός του και να συνεχίσετε να παρακολουθείτε ενώ περιηγείστε σε άλλες καρτέλες, γράφετε έγγραφα ή κάνετε οτιδήποτε άλλο στον υπολογιστή σας — το βίντεο παραμένει ορατό όλη την ώρα.

Το PiP είναι ενσωματωμένο σε όλους τους σύγχρονους περιηγητές επιφάνειας εργασίας (Chrome, Edge, Firefox, Safari) μέσω ενός τυποποιημένου web API. Δεν απαιτεί πρόσθετα ή επεκτάσεις και το κυμαινόμενο παράθυρο διαχειρίζεται εξ ολοκλήρου από το λειτουργικό σύστημα, επομένως παραμένει ακόμη και όταν αλλάζετε εφαρμογές.

Περιγραφή εργαλείου

Αυτό το εργαλείο φορτώνει οποιοδήποτε άμεσο URL βίντεο σε έναν HTML5 player και σας επιτρέπει να το εκκινήσετε σε λειτουργία Picture-in-Picture με ένα κλικ. Επικολλήστε έναν σύνδεσμο σε ένα δημόσια προσβάσιμο αρχείο βίντεο, φορτώστε το και πατήστε "Εκκίνηση Picture-in-Picture" για να αποσπάσετε το βίντεο σε ένα κυμαινόμενο παράθυρο επικάλυψης.

Υποστηριζόμενες μορφές

Οποιαδήποτε μορφή βίντεο που υποστηρίζει ο εγγενής HTML5 player του περιηγητή σας:

  • MP4 (H.264 / H.265) — καθολικά υποστηριζόμενη
  • WebM (VP8 / VP9 / AV1) — υποστηρίζεται στο Chrome, Firefox, Edge
  • OGG / OGV (Theora) — υποστηρίζεται στο Firefox και Chrome
  • MOV — υποστηρίζεται στο Safari· περιορισμένη υποστήριξη αλλού
  • M4V — υποστηρίζεται στους περισσότερους περιηγητές βασισμένους σε Chromium και Safari

Το αρχείο βίντεο πρέπει να παρέχεται μέσω HTTP/HTTPS και ο διακομιστής πρέπει να επιτρέπει αιτήματα διασταυρούμενης προέλευσης (CORS) για να μπορέσει ο περιηγητής να το φορτώσει.

Πώς λειτουργεί

  1. Το URL που εισάγετε φορτώνεται ως src ενός τυπικού HTML5 <video> στοιχείου.
  2. Όταν κάνετε κλικ στο "Εκκίνηση Picture-in-Picture", ο περιηγητής καλεί το εγγενές API requestPictureInPicture() σε αυτό το στοιχείο.
  3. Ο περιηγητής αποσπά το βίντεο σε ένα κυμαινόμενο παράθυρο που διαχειρίζεται ο διαχειριστής παραθύρων του λειτουργικού συστήματος.
  4. Το κλικ στο "Έξοδος από Picture-in-Picture" (ή το κουμπί κλεισίματος στο κυμαινόμενο παράθυρο) καλεί το exitPictureInPicture() και επιστρέφει το βίντεο στον player.

Δυνατότητες

  • Εκκίνηση και έξοδος PiP με ένα κλικ απευθείας από τον περιηγητή — δεν χρειάζονται επεκτάσεις
  • Λειτουργεί με οποιοδήποτε δημόσια προσβάσιμο άμεσο URL βίντεο
  • Player με αναλογία 16:9 με πλήρη εγγενή στοιχεία ελέγχου (αναπαραγωγή, παύση, αναζήτηση, ένταση, πλήρης οθόνη)
  • Ξεκινά αυτόματα την αναπαραγωγή πριν εισέλθει στο PiP, ώστε το βίντεο να μην είναι παγωμένο
  • Ανιχνεύει εάν το PiP δεν υποστηρίζεται στον τρέχοντα περιηγητή και εμφανίζει ένα σαφές μήνυμα

Περιπτώσεις χρήσης

  • Παρακολουθήστε ένα βίντεο σεμιναρίου σε ένα κυμαινόμενο παράθυρο ενώ ακολουθείτε τις οδηγίες σε έναν επεξεργαστή κώδικα ή σε άλλη καρτέλα περιηγητή
  • Παρακολουθήστε μια ζωντανή ροή ή καταγεγραμμένη ροή βίντεο ενώ εργάζεστε σε άλλες εφαρμογές
  • Διατηρήστε ένα βίντεο αναφοράς ορατό ενώ επεξεργάζεστε έγγραφα, υπολογιστικά φύλλα ή αρχεία σχεδίασης

Περιορισμοί

  • Ο διακομιστής βίντεο πρέπει να επιτρέπει την ανάκτηση του αρχείου από διαφορετική προέλευση (απαιτούνται κεφαλίδες CORS). Πολλά CDN και άμεσοι διακομιστές αρχείων το κάνουν ήδη· ορισμένα δεν το κάνουν.
  • Το PiP δεν είναι διαθέσιμο σε όλους τους περιηγητές — ιδιαίτερα ορισμένοι περιηγητές κινητών συσκευών και παλαιότερες εκδόσεις επιφάνειας εργασίας δεν υποστηρίζουν το API.
  • Οι μορφές λίστας αναπαραγωγής ροής όπως HLS (.m3u8) και DASH (.mpd) δεν υποστηρίζονται απευθείας· λειτουργούν μόνο τα URL προοδευτικής λήψης.

Συχνές ερωτήσεις

Γιατί το βίντεο δεν φορτώνεται; Ο διακομιστής που φιλοξενεί το βίντεο ενδέχεται να μην περιλαμβάνει την κεφαλίδα Access-Control-Allow-Origin που επιτρέπει τη φόρτωση διασταυρούμενης προέλευσης, ή το URL ενδέχεται να απαιτεί έλεγχο ταυτότητας. Δοκιμάστε έναν άμεσο δημόσιο σύνδεσμο σε ένα αρχείο βίντεο.

Γιατί είναι απενεργοποιημένο το κουμπί PiP; Πρέπει να φορτώσετε πρώτα ένα βίντεο εισάγοντας ένα URL και κάνοντας κλικ στο "Φόρτωση βίντεο". Το κουμπί γίνεται ενεργό μόλις οριστεί μια πηγή.

Λειτουργεί αυτό σε κινητές συσκευές; Το API Picture-in-Picture έχει περιορισμένη υποστήριξη σε περιηγητές κινητών συσκευών. Στο iOS, το Safari υποστηρίζει το PiP για βίντεο, αλλά η συμπεριφορά ενδέχεται να διαφέρει. Στο Android, το Chrome ενδέχεται να το υποστηρίζει ανάλογα με την έκδοση και τις ρυθμίσεις του λειτουργικού συστήματος.