إضافة تراكب إلى مقطع فيديو لحظر منطقة معينة من الفيديو خلال فترة زمنية معينة من الفيديو، مثل الدقائق 10 إلى 20، لن يتم عرض المنطقة المحددة. تتضمن سيناريوهات التطبيق حظر أيقونات القنوات الفضائية، وحظر الإعلانات في الزاوية اليمنى السفلية من مقاطع الفيديو، والعمل كفسيفساء، وما إلى ذلك.
قد يحتوي الفيديو الطويل على أقنعة متعددة، ولكل قناع وقت عرض محدد (خارج هذا الوقت يكون القناع مخفيًا).
تنفيذ الواجهة الأمامية لإخفاء الفيديوهناك حلان تقنيان يعتمدان على div وعلى اللوحة القماشية.
المبدأ الأساسي هو إرفاق طبقة قماشية شفافة بعلامة فيديو HTML، ثم الاستجابة لأحداث mousedown وmousemove وmouseup. نظرًا لأن حدث اللوحة القماشية يعتمد فقط على عنصر اللوحة القماشية، فيجب إكمال استجابة الحدث لكل عنصر داخل اللوحة القماشية (مستطيل، دائرة، وما إلى ذلك) من خلال التعليمات البرمجية الخاصة بك باستخدام الإحداثيات.
عنوان جيثب الإضافيhttps://github.com/cunzaizhuyi/maskPlugin
العنوان التجريبي
http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html
تم تنفيذ النقاط الوظيفية| اسم | نوع القيمة | يوضح |
|---|---|---|
| 1. الإعدادات ذات الصلة بالمستطيل | ||
| fillStyle | قيمة اللون | لون تعبئة المستطيل، الافتراضي هو "#eeeeee" |
| strokeStyle | قيمة اللون | لون خط الحدود المستطيل، الافتراضي هو "#0000ff" |
| inRectCursor | خيط | نمط الماوس عندما يكون الماوس داخل مستطيل صغير، يكون الوضع الافتراضي هو "التحريك". يمكن ضبطه على "المؤشر" أو شيء من هذا القبيل. |
| 2. الإعدادات ذات الصلة لثمانية مستطيلات صغيرة على الحدود المستطيلة | ||
| bRectsStrokeStyle | قيمة اللون | لون المستطيل الصغير الموجود على الحدود المستطيلة، اللون الافتراضي هو "#0000ff" |
| bSideLength | رقم | قيمة طول ضلع المستطيل الصغير على حدود المستطيل، القيمة الافتراضية هي 6 |
| 3. إخفاء الوقت المتعلق | ||
| com.masksTime | وقت عرض البداية ووقت العرض النهائي لكل قناع، قناع واحد يتوافق مع المستطيل |
[{maskId: 1، startTime: 0، endTime: 10،}، {maskId: 2، startTime: 3، endTime: 13،}] أخيراقد يكون هذا المكون الإضافي الصغير الذي يحتوي على أكثر من 700 سطر استنادًا إلى اللوحة الأصلية مجرد بداية لاستكشاف عالم اللوحة.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.