Erstellen Sie Ihr eigenes Picture-In-Picture-Video-Feature-Lesezeichen

Titelbild von Charlesdeluvio

...

Einige Websites und Video-Streaming-Dienste verfügen über eine Funktion, mit der Sie Videos im Bild-in-Bild-Modus ansehen können, aber sie sperren diese Funktion hinter einer Art Paywall oder machen sie zu einem Vorteil eines Abonnements.

Einige Websites verfügen einfach nicht vollständig über diese Funktion!

Ich finde das ärgerlich, da es sich um eine Funktion handelt, die in alle modernen Webbrowser integriert ist und für diejenigen, die wissen, wie man es macht, kostenlos genutzt werden kann, ohne dass besondere Anstrengungen, Käufe, Plugins oder Hack erforderlich sind.

So geht's:

Option 1 – Geben Sie den Code über die Entwicklungstools Ihres Webbrowsers ein

• Öffnen Sie die Entwicklungstools Ihres Webbrowsers (drücken Sie normalerweise die Taste F12 / klicken Sie mit der rechten Maustaste und wählen Sie „Element prüfen“)
• Gehen Sie zur Registerkarte „Konsole“
• Fügen Sie den folgenden Code ein:

// find the video element (may not work on sites with multiple video elements, but works for most of the main sites)
var vid = document.querySelector("video");

// remove the attribute that might stop us from launching the video in PiP
vid.removeAttribute("disablePictureInPicture");

// finally, request the PiP
vid.requestPictureInPicture();

Wenn alles in Ordnung ist, sollte jetzt das Video eingeblendet werden. Wenn nicht, müssen Sie möglicherweise document.querySelector("video") anpassen, um ein bestimmtes Videoelement auf der Seite auszuwählen.

Option 2 – Schaltfläche „Lesezeichen erstellen“, um PiP zu starten

Dieser Code ist derselbe wie das Beispiel in Option 1, jedoch auf eine Zeile reduziert, sodass er als URL ausgeführt werden kann.

Um es zu verwenden, gehen Sie einfach wie folgt vor:

• Wählen Sie alle folgenden Elemente aus und ziehen Sie sie per Drag & Drop in die Lesezeichenleiste Ihres Browsers, oder
• Erstellen Sie ein neues Lesezeichen mit dem Namen PiP und fügen Sie Folgendes als URL des Lesezeichens ein: Javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
• Klicken Sie auf das Lesezeichen, um PiP zu starten

Wie funktioniert ein „Bookmarklet“?

Ein Lesezeichen führt Sie normalerweise zu einer neuen Webseite. Ein Bookmarklet ist ein Lesezeichen, das Javascript auf der aktuellen Seite ausführt, anstatt Sie zu einer neuen Seite weiterzuleiten. Um zu deklarieren, dass es sich um ein Bookmarklet handelt, beginnt der „Ort“, auf den es verweist, mit javascript:.

— caseywatts

Der Zauber hier ist das Hinzufügen von Javascript am Anfang der URL. Dadurch wird der Browser angewiesen, eine Aktion auf der aktuellen Seite auszuführen, anstatt Sie zu einer neuen Seite weiterzuleiten.

Weitere Informationen zu Lesezeichen und wie Sie mit ihnen kreativer werden können, finden Sie in dieser großartigen Erklärung von @caseywatts zum Erstellen von Lesezeichen

...

Originalartikel: https://mothy.dev/posts/free-picture-in-picture

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihr eigenes Picture-In-Picture-Video-Feature-Lesezeichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!