Créez votre propre bookmarklet de fonctionnalité vidéo Picture-In-Picture

Image de couverture par charlesdeluvio

...

Certains sites Web et services de streaming vidéo disposent d'une fonctionnalité qui vous permet de regarder des vidéos en mode Picture-in-Picture, mais ils verrouillent cette fonctionnalité derrière une sorte de mur payant ou en font un avantage d'avoir un abonnement.

Certains sites Web n'ont tout simplement pas cette fonctionnalité !

Je trouve cela exaspérant, car il s'agit d'une fonctionnalité intégrée à tous les navigateurs Web modernes et dont l'utilisation est gratuite pour ceux qui savent comment le faire sans effort particulier, sans achats, plugins ou piratage.

Voici comment procéder :

Option 1 - Entrez le code via les outils de développement de votre navigateur Web

• Ouvrez les outils de développement de votre navigateur Web (appuyez généralement sur la touche F12 / cliquez avec le bouton droit et choisissez Inspecter l'élément)
• Allez dans l'onglet Console
• Collez le code suivant :

// 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();

Tout va bien, vous devriez maintenant avoir la vidéo pop-out. Sinon, vous devrez peut-être modifier document.querySelector("video") pour sélectionner un élément vidéo spécifique sur la page.

Option 2 - Créer un bouton de signet pour lancer PiP

Ce code est le même que l'exemple de l'option 1, mais réduit à une ligne sur une ligne afin qu'il puisse être exécuté en tant qu'URL.

Pour l'utiliser, simplement :

• Sélectionnez tous les éléments suivants et faites-les glisser dans la barre de favoris de votre navigateur, ou
• Créez un nouveau favori appelé PiP et collez ce qui suit comme URL du favori : javascript : var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
• Cliquez sur le signet pour lancer PiP

Comment fonctionne un « Bookmarklet » ?

Un signet vous amène normalement à une nouvelle page Web. Un bookmarklet est un signet qui exécute du javascript sur la page actuelle au lieu de vous diriger vers une nouvelle page. Pour déclarer qu'il s'agit d'un bookmarklet, "l'emplacement" vers lequel il pointe commence par javascript :.

—caseywatts

La magie ici, c'est l'ajout de javascript au début de l'URL. Cela indique au navigateur d'effectuer une action sur la page actuelle, plutôt que de vous diriger vers une nouvelle page.

Pour plus d'informations sur les bookmarklets et pour devenir plus créatif avec eux, consultez cette excellente explication de @caseywatts sur la création de bookmarklets

...

Article original : https://mothy.dev/posts/free-picture-in-picture

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!