ในช่วงเวลานี้ฉันได้ศึกษาผืนผ้าใบ
วิธีการทำ:
1. โหลดวิดีโอบนหน้าเมื่อใช้ผ้าใบเพื่อทำฟังก์ชั่นภาพหน้าจอนี้ก่อนอื่นเราต้องตรวจสอบให้แน่ใจก่อนว่าหน้านั้นได้รับการโหลดและเสร็จสมบูรณ์เพื่อให้สามารถใช้งานได้อย่างง่ายดาย หากคุณใช้ป้าย <วิดีโอ> ด้านล่าง:
<วิดีโอลูปควบคุม ID = testMp4 width = 500 height = 400> <source src = test.mp4 type = video/mp4> <source src = test.webm type/webm> <sour ce src = test.ogg type = video/video/video/video Ogg> </video>
ใน "HTML5 และวิดีโอ" ของฉันเบราว์เซอร์รองรับความคืบหน้าของการโหลดล่วงหน้าและโหลดเหตุการณ์ของวิดีโอซึ่งจะส่งผลกระทบต่อการเล่นวิดีโอและกิจกรรมอื่น ๆ ดังนั้นเราจึงใช้ JS เพื่อสร้างวิดีโอเพื่อแนะนำวิดีโอ
ด้วยวิธีนี้คุณควรให้ความสนใจกับการแนะนำวิดีโอ
1.1 ใช้วิธี CanplayType () ของวิดีโอเพื่อตัดสินรูปแบบการสนับสนุนเมธอด canplayType () ต้องผ่านพารามิเตอร์พารามิเตอร์นี้เป็นรูปแบบของวิดีโอ
ค่าที่ใช้กันทั่วไป: วิดีโอ/ogg;
วิดีโอ/mp4;
วิดีโอ/webm;
หรือรวมถึง encoders:
วิดีโอ/ogg;
วิดีโอ/mp4;
วิดีโอ/webm;
ค่าส่งคืน: ระบุระดับการสนับสนุนของเว็บเพจ: น่าจะเป็นไปได้มากที่สุด (ส่งคืนสิ่งนี้เมื่อค่าอินพุตอยู่กับตัวเข้ารหัส);
ฟังก์ชั่น Videotype (วิดีโอ) {var return = ''; ถ้า (video.canplaytype ('วิดีโอ/mp4') == 'อาจ' || video.canplaytype ('วิดีโอ/mp4') == 'อาจ') {returnType = 'mp4';} อื่นถ้า (video.canplaytype ('video/ogg') == 'อาจ' || video.canplaytype ('วิดีโอ/ogg') == 'อาจ') {<br> retunty pe = 'ogg '; <br>} อื่นถ้า (video.canplaytype (' วิดีโอ/webm ') ==' อาจ '|| video.canplaytype (' วิดีโอ/webm ') ==' อาจ ') {<br> retuntyp e =' webm '; <br>} <br> returnType;ฟังก์ชั่นนี้สามารถกำหนดรูปแบบของการสนับสนุนของเบราว์เซอร์สำหรับวิดีโอ
1.2 ใช้แท็กวิดีโอการโหลด JS แบบไดนามิกหลังจากตัดสินรูปแบบการสนับสนุนของเบราว์เซอร์ที่นี่เนื่องจากฉันใช้ Chrome เบราว์เซอร์ของฉันรองรับวิดีโอรูปแบบ MP4 จากนั้นเราก็สร้างแท็กวิดีโอแบบไดนามิก
Vareelem; Videotype (VideoElem);
เนื่องจากเราต้องการทำฟังก์ชั่นภาพหน้าจอที่นี่วิดีโอง่าย ๆ ไม่มีส่วนต่อประสานของภาพหน้าจอดังนั้นเราจึงต้องคัดลอกไปยังผืนผ้าใบและออกอากาศวิดีโอนี้บนผืนผ้าใบดังนั้นที่นี่เราซ่อนวิดีโอก่อนเพื่อซ่อน (ไม่มี: ไม่มี)
2. ใช้วิดีโอสำเนาผ้าใบตอนนี้วิดีโอได้รับการเล่นบนเบราว์เซอร์ วิธีการวาดวิดีโอบนผืนผ้าใบที่นี่เราต้องใช้ฟังก์ชั่น การใช้ฟังก์ชัน DrawImage
1. drawimage (img, x, y): วาด img ในตำแหน่งของผ้าใบ (x, y);
2. drawimage (img, x, y, ความกว้าง, ความสูง): วาด IMG กว้างกว้างที่มีความสูงสูง
3.DrawImage (IMG, SX, SY, Swidtht, Sheight, X, Y, ความกว้าง, ความสูง, ความสูง): วาดตำแหน่ง IMG (SX, SY) ในตำแหน่งผ้าใบ (x, y) ความกว้างของสวิตช์, Sheight High, ภาพหน้าจอ Sheight วาดบนผืนผ้าใบเพื่อความกว้างและสูง
ข้างต้นคือการใช้งานของ DrawImage
กลับไปที่ภาพหน้าจอตอนนี้เราได้สร้างผืนผ้าใบบนเบราว์เซอร์-คอนเทอร์เทอร์และจากนั้นเราจะวาดวิดีโอที่นี่:
ContextVideo.DrawImage (VideoElem, 0,0);
จากนั้นเราสามารถเห็นภาพในผืนผ้าใบ แต่วิดีโอมีการเปลี่ยนแปลงอยู่ตลอดเวลาดังนั้นเราจึงต้องใช้ฟังก์ชัน setInterval เพื่อดำเนินการต่อเพื่อวาดเป็นแหล่งที่มา
setInterval (function () {<br> contextVideo, drawImage (videoelem, 0,0); <br>}, 100)ขนาดของช่วงเวลาที่นี่จะส่งผลกระทบว่าการเล่นวิดีโอจะเป็นการ์ดหรือไม่
ณ จุดนี้เราย้ายวิดีโอไปยังผ้าใบ ถัดไปทำภาพหน้าจอ
3. ทำภาพหน้าจอแสดงแผงผืนผ้าใบที่นี่เราจำเป็นต้องวาดผืนผ้าใบบนหน้าบริบทของหน้าจากนั้นใช้วิธี DrawImage เพื่อถ่ายภาพหน้าจออีกครั้ง
contextimg.drawimage (Canvasvideo, 0,0, Canvasvideo.width, Canvasvideo.height);
รหัสนี้วาดผืนผ้าใบแรกไปยังผืนผ้าใบที่สอง
4. ทำปุ่มภาพหน้าจอทำปุ่มแล้วผูกเหตุการณ์คลิก
เมื่อกราฟถูกตัดปุ่มขวาสามารถบันทึกไว้แล้วเทลงใน PS เพื่อสร้างอิโมติคอน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้