1. المتطلبات: قم بتحميل مقطع فيديو واعتراض إطار معين من الفيديو كغلاف للفيديو.
2. فكرة التنفيذ: استخدم وظيفة رسم الصور على القماش لرسم إطار معين من الصورة هنا، وهو أمر سهل التنفيذ للغاية.
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=videocontrols=controls> <source src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var video, Container; varscale = 0.8; var serialize = function( ) { Container = document.getElementById(container); video = document.getElementById(video); }; varcaptureImage = function() { var Canvas = document.createElement(canvas); video, 0, 0, Canvas.width, Canvas.height); var img = document.createElement(img); Canvas.toDataURL(image/png);// قم بالتحويل إلى صورة base64 وأخرج العنوان واستخدمه مباشرة Container.appendChild(img); </أتش تي أم أل>
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.