เว็บไซต์วิดีโอทั่วไปสามารถนำภาพหน้าจอของวิดีโอที่ผู้ใช้ที่เล่นอัพโหลดโดยผู้ใช้ ฟังก์ชั่นนี้ยังสามารถนำเสนอในโครงการเพื่อให้ผู้ใช้มีประสบการณ์ที่ดีแทนที่จะให้ผู้ใช้อัปโหลดแผนภาพการแสดงผลเพิ่มเติม
แผนที่เอฟเฟกต์:
มันยังดูดี
_canvas = document.createlement (Canvas); = _canvas.todaurl (รูปภาพ/png);
รหัสหลักคือบรรทัดเหล่านี้ นั่นคือประเด็นสำคัญ
ลองดูตัวอย่างทั้งหมด:
html:
<! จอแสดงผล: margin: 60px auto 0;} #shotbar {posity: Absolute; 5px; type = text/javascript src = ../../.././jQuery -.8.3.js> </script> <script type = text/javascript src = videoShot.js> </cri ข้อความ/javascript> $ (function () {zhanghongyang.click2shot.init ();});ทั้ง HTML และ CSS ค่อนข้างง่าย
ส่วนใหญ่ขึ้นอยู่กับรหัสของ JS:
/ ** สร้างขึ้นด้วย jetbrains webstorm .click2shot = (ฟังก์ชั่น () {var _id_video = วิดีโอ; var _id_shotbar = shotbar; var _videowidth = 0; var _videoheight = 0; var_canvas = null; tx = null; var _video = null; CreateElement (Canvas); แปด); ); , _VideoHeight); ซ้าย: _video.offsetlect, ด้านบน: _video.offsettop, ความกว้าง: _videowidth + px, ความสูง: _videowidth + px}) = $ (IMG>); เพิ่มเอฟเฟกต์แอนิเมชั่น $ imgbig.animate ({ซ้าย: Official.x + Px, Top: Official.y + Px, Width: $ img.width () + px, ความสูง: $ img.height () + px}, 200, 200, function () {$ img.attr (src, dataurl). show (); {x: (หมายเลข | หมายเลข), y: (หมายเลข | หมายเลข)} * @priving */ function_getoffset (ele m) {var pos = {x: elem.offsetleft, y: elem.offsettop}; Offsetparent;ควรสังเกตว่าหลังจากได้รับแอตทริบิวต์และการดำเนินการบางอย่างในวิดีโอเหตุการณ์การแสดงให้แน่ใจว่าได้ removeEventLinstener มิฉะนั้นวิธีนี้จะถูกเรียกใช้เสมอ เมื่อคลิกที่เหตุการณ์วิดีโอจะถูกระงับและจากนั้นรูปภาพจะถูกสร้างขึ้นในตำแหน่งของวิดีโอ
หลังจากได้รับรูปภาพคุณสามารถเพิ่มด้วยตัวคุณเอง นอกจากนี้ยังมีจุดสำคัญมาก: Canvas.todataurl (Image/PNG); ปัญหาด้านความปลอดภัย
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้