ฉันจะอธิบายให้คุณฟังถึงการสาธิตเล็กๆ น้อยๆ ที่น่าสนใจที่ฉันเห็นเมื่อไม่กี่วันก่อน: ภาพหน้าจอออนไลน์ของวิดีโอ นี่คือการเรนเดอร์หลังจากที่ฉันแก้ไขและเพิ่มคุณสมบัติใหม่:
มันไม่เจ๋งเหรอ จริงๆ แล้วมันค่อนข้างง่าย ฉันจะบอกวิธีทำด้านล่างนี้
ส่วนใหญ่จะแบ่งออกเป็นสามหน้าที่หลัก หน้าที่แรกคือหน้าที่แรก:
ใช้วัตถุ URL เพื่อรับลิงค์วิดีโอและแสดง:
อ็อบเจ็กต์ URL ของ js มีเมธอด createObjectURL ซึ่งสามารถรับ URL ของไฟล์ (อ็อบเจ็กต์ไฟล์) จากนั้นแทรกลงในแอตทริบิวต์ src ขององค์ประกอบวิดีโอ เพื่อให้สามารถแสดงวิดีโอได้ แน่นอนว่ามีหลายวิธีในการรับออบเจ็กต์ File เช่น การใช้องค์ประกอบอินพุตหรือการลาก ข้อมูลโค้ดที่สมบูรณ์:
<input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this. ไฟล์[0])})แน่นอน ฉันไม่ได้เขียนมันแบบนี้ในซอร์สโค้ด เพียงเพื่อให้คุณสาธิต หากต้องการใช้ URL อย่างเจาะจงมากขึ้น คุณสามารถอ่านบทความนี้หรือ MDN
ใช้ Canvas เพื่อให้ได้ภาพหน้าจอวิดีโอ:ขั้นตอนต่อไปคือขั้นตอนสำคัญ แต่ก็ง่ายมากเช่นกัน นั่นคือการใช้วิธี DrawImage ของ Canvas หากคุณเปิดไปที่ส่วนที่ 15.2.6 ของ Elevation 3 คุณจะพบว่าการใช้วิธี DrawImage มีอธิบายไว้ใน มีรายละเอียดมาก แต่ก็พลาดไป หนึ่งคือองค์ประกอบวิดีโอสามารถส่งผ่านไปยังวิธี DrawImage และสามารถวาดกราฟิกได้ ข้อมูลโค้ดเฉพาะ:
var canvas = document.createElement(canvas);var canvasCtx = canvas.getContext(2d);var video=document.querySelector('video');//นั่งพิกัด x, แกน y และขนาดของรูปภาพต้นฉบับ และ x ของรูปภาพเป้าหมาย, ป้ายแกน y, ขนาด canvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//เข้ารหัสไอคอน base64 ลงในสตริง url var dataUrl = canvas.toDataURL(image/png);// ใส่รูปภาพ ลงในแอตทริบิวต์ src document.createElement('img').src=dataUrl;หลังจากวาดภาพแล้ว ให้เรียกเมธอด toDataURl ของ Canvas เพื่อเปลี่ยนรูปภาพให้เป็น URL ที่เข้ารหัส base64 ซึ่งสามารถแทรกลงในองค์ประกอบ img เพื่อแสดงผลได้ การผลิตภาพขนาดย่อเสร็จสมบูรณ์ เกี่ยวกับความสัมพันธ์ระหว่างรูปภาพกับ base64 นักเรียนสามารถอ่านบทความนี้ได้
เพื่อให้ได้เอฟเฟ็กต์ภาพเคลื่อนไหว:หลักการสำคัญในการใช้แอนิเมชั่นนี้คือ ขั้นแรกให้สร้างภาพขนาดใหญ่ที่มีขนาดเท่ากับวิดีโอในตำแหน่งดั้งเดิมของวิดีโอ ตั้งค่าเป็นเลย์เอาต์ที่สมบูรณ์ (ตำแหน่ง:สัมบูรณ์) สร้างภาพขนาดเล็กโดยวางภาพขนาดย่อไว้จริง และตั้งค่าเป็นมองไม่เห็น (การมองเห็น: ซ่อนอยู่) จากนั้นรูปภาพขนาดใหญ่จะเลื่อนไปทางด้านซ้ายและด้านบน และความกว้างและความสูงจะลดลงไปยังตำแหน่งจริงที่วางภาพย่อไว้ และเอฟเฟกต์ภาพเคลื่อนไหวจะถูกสร้างขึ้น สุดท้ายลบภาพใหญ่แล้วแสดงภาพเล็ก ข้อมูลโค้ดเฉพาะ:
ฟังก์ชัน getOffset (elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; ในขณะที่ (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop; offsetParent = offsetParent.offsetParent; } กลับตำแหน่ง;}ฟังก์ชันนี้มีไว้เพื่อรับระยะห่างระหว่างรูปภาพขนาดเล็กและวิวพอร์ต (วิวพอร์ต) และจัดเตรียมให้กับรูปภาพขนาดใหญ่เป็นพารามิเตอร์การกระจัด ส่วนที่ 12.2.3 ของ Elevation 3 มีโค้ดที่เกือบจะเหมือนกัน พร้อมด้วยคำแนะนำโดยละเอียดและฟังก์ชันทางเลือก getBoundingClientRect มันถูกกล่าวถึงด้วยโปรดอ่านหนังสือเพื่อดูรายละเอียด
รหัสต่อไปนี้คือการสร้างรูปภาพขนาดใหญ่และรูปภาพขนาดเล็กและบรรลุเอฟเฟกต์ภาพเคลื่อนไหว เพื่อความสะดวกและเข้าใจง่าย ผมใช้ JQuery ที่นี่
var $imgBig = $(<img/>);//กำหนดตำแหน่งเริ่มต้นของภาพใหญ่ซึ่งเป็นวิดีโอต้นฉบับ $imgBig.css({ ตำแหน่ง: สัมบูรณ์, ซ้าย: video.offsetLeft, ด้านบน: video.offsetTop, ความกว้าง: video.offsetWidth+ px, ความสูง: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//รับพารามิเตอร์ระยะทางของภาพขนาดเล็กเพื่อให้ได้เอฟเฟ็กต์ภาพเคลื่อนไหวของภาพขนาดใหญ่ var offset = getOffset($img[0]);//เพิ่มเอฟเฟกต์ภาพเคลื่อนไหว $imgBig.animate({ left: offset.x + px, top: offset.y + px, ความกว้าง: $img.width() + px, ความสูง: $img.height() + px}, 500, ฟังก์ชั่น () { $img.show(); $imgBig.remove();});แค่นั้นแหละสำหรับส่วนของโค้ดหลัก แน่นอนว่ายังมีปัญหาโดยละเอียดมากมายในการใช้งานเฉพาะและฟังก์ชันอื่น ๆ ที่อาจไม่แสดง ดังนั้นฉันจะไม่อธิบายทีละข้อ คุณสามารถเข้าไปดูรายละเอียดได้หลังจากอ่านจบแล้ว ซอร์สโค้ด ถามคำถาม
ด้านล่างนี้คือที่อยู่ซอร์สโค้ดของฉัน คุณสามารถลองได้:
การสาธิตบน GitHub
สรุปด้านบนนี้เป็นวิดีโอที่รวมกับ Canvas ที่โปรแกรมตัดต่อแนะนำให้คุณรู้จักกับฟังก์ชันภาพหน้าจอวิดีโอออนไลน์ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความไว้ให้ฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณ เวลา. ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!