Buat penanda buku ciri video Picture-In-Picture anda sendiri

Imej muka depan oleh charlesdeluvio

...

Sesetengah tapak web & perkhidmatan penstriman video mempunyai ciri yang membolehkan anda menonton video dalam mod Picture-in-Picture, tetapi mereka mengunci ciri ini di sebalik beberapa jenis tembok berbayar atau menjadikannya satu kelebihan untuk memiliki langganan.

Sesetengah tapak web tidak mempunyai ciri ini sama sekali!

Saya rasa ini menjengkelkan, kerana ini adalah ciri yang terbina dalam semua penyemak imbas web moden dan percuma untuk digunakan bagi mereka yang tahu cara melakukannya tanpa usaha, pembelian, pemalam atau penggodaman khas.

Begini cara melakukannya:

Pilihan 1 - Masukkan kod melalui alat pembangun penyemak imbas web anda

• Buka alat pembangun penyemak imbas web anda (biasanya tekan kekunci F12 / klik kanan & pilih Inspect Element)
• Pergi ke tab Konsol
• Tampal kod berikut:

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

Semuanya baik-baik saja, kini anda sepatutnya mempunyai video pop-keluar. Jika tidak, anda mungkin perlu mengubah suai document.querySelector("video") untuk memilih elemen video tertentu pada halaman.

Pilihan 2 - Buat butang Penanda Halaman untuk melancarkan PiP

Kod ini adalah sama seperti contoh dalam Pilihan 1, tetapi dilucutkan ke satu baris ke satu baris supaya ia boleh dilaksanakan sebagai URL.

Untuk menggunakannya, hanya:

• Pilih semua yang berikut dan seret dan lepas ke dalam bar penanda halaman penyemak imbas anda, atau
• Buat penanda halaman baharu yang dipanggil PiP dan tampal yang berikut sebagai URL penanda halaman: javascript: var vid=document.querySelector('video');vid.removeAttribute('disablePictureInPicture');vid.requestPictureInPicture();
• Klik penanda halaman untuk melancarkan PiP

Bagaimanakah "Bookmarklet" berfungsi?

Penanda halaman biasanya membawa anda ke halaman web baharu. Penanda buku ialah penanda halaman yang menjalankan javascript pada halaman semasa dan bukannya membawa anda ke halaman baharu. Untuk mengisytiharkan bahawa ia adalah penanda buku, "lokasi" yang ditunjukkannya bermula dengan javascript:.

— caseywatts

Keajaiban di sini, ialah penambahan javascript pada permulaan URL. Ini memberitahu penyemak imbas untuk melakukan tindakan pada halaman semasa, dan bukannya membawa anda ke halaman baharu.

Untuk mendapatkan maklumat lanjut tentang bookmarklet dan menjadi lebih kreatif dengannya, lihat penjelasan hebat ini daripada @caseywatts tentang Membuat Bookmarklet

...

Artikel asal: https://mothy.dev/posts/free-picture-in-picture

Atas ialah kandungan terperinci Buat penanda buku ciri video Picture-In-Picture anda sendiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!