خلال هذا الوقت ، كنت أدرس القماش.
طريقة صنع:
1. تحميل الفيديو على الصفحةعند استخدام Canvas لجعل وظيفة الشاشة هذه ، يجب علينا أولاً التأكد من أن الصفحة قد تم تحميلها وإكمالها ، بحيث يمكنها تشغيلها بسهولة. إذا كنت تستخدم تسمية <Vide> أدناه مباشرة:
<معرف التحكم في حلقة الفيديو = TestMP4 عرض = 500 ارتفاع = 400> <المصدر src = test.mp4 type = video/mp4> <source src = test.webm type/webm> <sour ce src = test.ogg type = video/ ogg> </video>
في "HTML5 و Video" ، يدعم المتصفح التقدم المحمّل مسبقًا وتحميل أحداث الفيديو ، والتي ستؤثر على تشغيل الفيديو والأحداث الأخرى. لذلك نستخدم JS لبناء فيديو لتقديم مقاطع الفيديو.
وبهذه الطريقة ، يجب أن تنتبه إلى تقديم مقاطع الفيديو.
1.1 استخدم طريقة canplaytype () للفيديو للحكم على تنسيق الدعمتحتاج طريقة CanPlayType () إلى تمرير المعلمة ، هذه المعلمة هي تنسيق الفيديو ،
القيمة الشائعة الاستخدام: الفيديو/OGG ؛
فيديو/mp4 ؛
فيديو/ويب ؛
أو تضمين المشفرات:
فيديو/OGG ؛
فيديو/mp4 ؛
فيديو/ويب ؛
قيمة الإرجاع: يشير إلى مستوى الدعم لصفحة الويب: من المرجح أن تدعم هذا الأمر فقط عندما لا تدعم قيمة الإدخال ؛
Function VideoType (video) {var return = '' ؛ 'mp4' ؛} آخر إذا (video.canplaytype ('video/ogg') == 'ربما' || video.canplaytype ('video/ogg') == 'ربما') {<br> pe = 'ogg '؛ webm '؛ <br>} <br> إرجاعيمكن لهذه الوظيفة تحديد تنسيق دعم المتصفح للفيديو.
1.2 استخدم علامة فيديو التحميل الديناميكية JSبعد الحكم على تنسيق الدعم للمتصفح هنا ، لأنني أستخدم Chrome ، يدعم متصفحي مقاطع فيديو تنسيق MP4 ، ثم نقوم بإنشاء علامة فيديو ديناميكية.
VAREELEM ؛ FideoType (videolem) ؛
نظرًا لأننا نريد إنشاء وظيفة لقطة الشاشة هنا ، فإن الفيديو البسيط لا يحتوي على واجهة لقطات الشاشة ، لذلك نحتاج إلى نسخها إلى قماش وبث هذا الفيديو على القماش ، لذلك هنا نخفي أولاً الفيديو (العرض: لا شيء).
2. استخدم فيديو نسخ قماشتم تشغيل الفيديو الآن على المتصفح. كيفية رسم الفيديو على القماش ، هنا نحتاج إلى استخدام وظيفة. استخدام وظيفة drawimage
1. DrawImage (IMG ، X ، Y): ارسم IMG في موضع اللوحة (X ، Y) ؛
2. DrawImage (IMG ، X ، Y ، العرض ، الارتفاع): ارسم عرض IMG على نطاق واسع مع ارتفاع مرتفع ، ارتفاع ؛
3.DrawImage (IMG ، SX ، SY ، Swidtht ، Sneight ، X ، Y ، العرض ، الارتفاع ، الارتفاع): ارسم وضع IMG (SX ، SY) في موقف القماش (X ، Y) من عرض SWIDTH ، High ، High ، لقطة الشاشة ، ارسم على القماش للعرض والارتفاع.
ما سبق هو استخدام DrawImage.
بالعودة إلى لقطة الشاشة ، قمنا الآن بإنشاء قماش على مستعرض ContextVideo ، وبعد ذلك سنرسم الفيديو هنا:
ContextVideo.drawImage (Videolem ، 0،0) ؛
بعد ذلك ، يمكننا رؤية صورة في قماش ، لكن الفيديو يتغير باستمرار ، لذلك نحتاج إلى استخدام وظيفة setInterval لمواصلة الرسم كمصدر.
setInterval (function () {<br> contextVideo ، drawImage (videolem ، 0،0) ؛ <br>} ، 100)سيؤثر حجم الفاصل الزمني هنا على ما إذا كان تشغيل الفيديو سيكون بطاقة.
في هذه المرحلة ، نقلنا الفيديو إلى قماش. بعد ذلك ، قم بعمل لقطة شاشة.
3. جعل لقطات شاشة عرض لوحة قماشنحتاج هنا إلى رسم قماش قماش على سياق الصفحة ، ثم استخدام طريقة DrawImage لأخذ لقطة شاشة مرة أخرى.
contextimg.drawimage (canvasvideo ، 0،0 ، canvasvideo.width ، canvasvideo.height) ؛
يرسم هذا الرمز القماش الأول إلى اللوحة الثانية.
4. قم بعمل زر لقطة الشاشةقم بعمل زر ، ثم ربط حدث النقر.
عندما يتم قطع الرسم البياني ، يمكن حفظ الزر الأيمن ، ثم سكبها في PS لصنع الرموز.
ما سبق هو كل محتويات هذا المقال.