1. ข้อกำหนด: อัปโหลดวิดีโอและสกัดกั้นเฟรมของวิดีโอไว้เป็นหน้าปกของวิดีโอ
2. แนวคิดในการนำไปปฏิบัติ: ใช้ฟังก์ชันการวาดภาพของ Canvas เพื่อวาดเฟรมบางเฟรมของรูปภาพ เฟรมแรกจะถูกวาดไว้ที่นี่ ซึ่งใช้งานง่ายมาก
3. รหัส:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>หน้าจอจับภาพ</title> <style type=text/css> video,#container{width: 300px;height: 200px;} #container>img{width: 100%;} </style></head><body> <video id=video controls=controls> <source src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var video, container; var scale = 0.8; var เตรียมใช้งาน = function( ) { คอนเทนเนอร์ = document.getElementById(คอนเทนเนอร์); วิดีโอ = document.getElementById(วิดีโอ); video.addEventListener('loadeddata', captureImage); }; var captureImage = function() { var canvas = document.createElement(canvas); canvas.width = video.videoWidth * สเกล; canvas.height = video.videoHeight * สเกล; วิดีโอ, 0, 0, canvas.width, canvas.height); var img = document.createElement(img); canvas.toDataURL(image/png);//แปลงเป็นอิมเมจ base64 นำที่อยู่ออกแล้วใช้โดยตรง </ /html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network