Tambahkan overlay ke video untuk memblokir area tertentu pada video. Selama jangka waktu tertentu dalam video, seperti menit ke-10 hingga ke-20, area yang dibatasi tidak akan ditampilkan. Skenario aplikasi termasuk memblokir ikon TV satelit, memblokir iklan di sudut kanan bawah video, bertindak sebagai mosaik, dll.
Video panjang mungkin berisi beberapa topeng, masing-masing topeng memiliki waktu tampilan tertentu (di luar waktu tersebut topeng disembunyikan).
Implementasi penyembunyian video secara front-endAda dua solusi teknis berdasarkan div dan berdasarkan kanvas. Artikel ini diselesaikan menggunakan kanvas.
Prinsip utamanya adalah melampirkan lapisan kanvas transparan ke tag video HTML, dan kemudian merespons peristiwa mousedown, mousemove, dan mouseup. Karena kejadian kanvas hanya didasarkan pada elemen kanvas, respons kejadian setiap elemen di dalam kanvas (persegi panjang, lingkaran, dll.) harus diselesaikan dengan kode Anda sendiri menggunakan koordinat.
Alamat GitHub pluginhttps://github.com/cunzaizhuyi/maskPlugin
Alamat demo
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
Poin fungsi diterapkan| nama | tipe nilai | menjelaskan |
|---|---|---|
| 1. Pengaturan terkait persegi panjang | ||
| gaya isi | nilai warna | Warna isian persegi panjang, defaultnya adalah '#eeeeee' |
| gaya stroke | nilai warna | Warna garis batas persegi panjang, defaultnya adalah '#0000ff' |
| diRectCursor | rangkaian | Gaya mouse saat mouse berada di dalam persegi panjang kecil. Defaultnya adalah 'bergerak'. Dapat diatur ke 'pointer' atau semacamnya. |
| 2. Pengaturan terkait untuk delapan persegi panjang kecil pada batas persegi panjang | ||
| bRectsStrokeStyle | nilai warna | Warna persegi panjang kecil pada batas persegi panjang, defaultnya adalah '#0000ff' |
| bPanjang Samping | nomor | Nilai panjang sisi persegi panjang kecil pada batas persegi panjang, defaultnya adalah 6 |
| 3. Terkait waktu masking | ||
| maskerWaktu | Waktu tampilan mulai dan waktu tampilan akhir setiap topeng, satu topeng berhubungan dengan persegi panjang |
[{ maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}] akhirnyaPlug-in kecil dengan lebih dari 700 garis berdasarkan kanvas asli ini mungkin hanyalah permulaan untuk menjelajahi dunia kanvas.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.