คำอธิบายโดยละเอียดของปลั๊กอินวิดีโอมาสก์ที่ใช้ Canvas

เพิ่มการซ้อนทับให้กับวิดีโอเพื่อบล็อกพื้นที่บางส่วนของวิดีโอ ในช่วงเวลาหนึ่งๆ ของวิดีโอ เช่น นาทีที่ 10 ถึง 20 พื้นที่ที่คั่นจะไม่แสดง สถานการณ์การใช้งาน ได้แก่ การบล็อกไอคอนทีวีดาวเทียม การบล็อกโฆษณาที่มุมขวาล่างของวิดีโอ การทำหน้าที่เป็นโมเสก ฯลฯ

วิดีโอขนาดยาวอาจมีมาสก์หลายอัน โดยแต่ละมาสก์มีเวลาแสดงเฉพาะ (นอกเวลาที่มาสก์ถูกซ่อนอยู่)

มีวิธีแก้ไขปัญหาทางเทคนิคสองวิธีโดยอิงจาก div และอิงจาก Canvas

หลักการสำคัญคือการแนบเลเยอร์ผ้าใบโปร่งใสเข้ากับแท็กวิดีโอ HTML จากนั้นตอบสนองต่อเหตุการณ์การเลื่อนเมาส์ การเลื่อนเมาส์ และการเลื่อนเมาส์ เนื่องจากเหตุการณ์แคนวาสขึ้นอยู่กับองค์ประกอบแคนวาสเท่านั้น การตอบกลับเหตุการณ์ของแต่ละองค์ประกอบภายในแคนวาส (สี่เหลี่ยม วงกลม ฯลฯ) จะต้องดำเนินการให้เสร็จสิ้นด้วยโค้ดของคุณเองโดยใช้พิกัด

https://github.com/cunzaizhuyi/maskPlugin

ที่อยู่สาธิต

http://htmlpreview.github.io/?https://github.com/cunzaizhuyi/maskPlugin/blob/master/mask/mask.html

1. วาดหน้ากาก (สี่เหลี่ยม)
2. ตั้งค่ารูปแบบมาสก์ (มี API ให้)
3. การเคลื่อนไหวของหน้ากาก
4. การปรับขนาดหน้ากาก
5. การเปลี่ยนแปลงสไตล์เมาส์บนผืนผ้าใบ

 [{ maskId: 1, startTime: 0, endTime: 10,}, {maskId: 2, startTime: 3, endTime: 13,}]

ปลั๊กอินขนาดเล็กที่มีมากกว่า 700 บรรทัดบน Canvas ดั้งเดิมนี้อาจเป็นเพียงจุดเริ่มต้นในการสำรวจโลกแห่ง Canvas

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network