لقطة شاشة من الفديو عبر Javascript

يمكنك أخذ صوره وعمل لقطه شاشة للفديو من جزء محدد بإستخدام Javascript وتستطيع تنزيل الصوره التي تمت إلتقاطها عبر الضغط علي الزر الايمن للمؤشر .
يتم إستخدام base64 لتصدير الصوره بإستخدام أكواد HTML
الكود التالي كامل لإستيراد مكتبات Javscript للتعامل معها بشكل أفضل مع أكواد HTML

<link rel="stylesheet" type="text/css" href="//vjs.zencdn.net/5.4.6/video-js.min.css"> <script type="text/javascript" src="//vjs.zencdn.net/5.4.6/video.min.js"></script> <video id="myvideo" class="video-js vjs-fluid vjs-tech" controls="controls" width="400" height="150" data-setup="{}" poster="https://image.freepik.com/free-vector/hacker-anonymous-mask-server-room-with-multiple-computer-monitors-displaying-secret-information_33099-1629.jpg"> <source src="https://cdn.statically.io/gh/yehia-hacker/yehia.online/fb849e9c/Downloads/Others/L_V%20mini.mp4" type="video/mp4" /> </video> <button id="snap" onclick="snap()">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas> <script type="text/javascript">//<![CDATA[ var video = document.querySelector('video'); var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var w, h, ratio; video.addEventListener('loadedmetadata', function() { ratio = video.videoWidth / video.videoHeight; w = video.videoWidth - 100; h = parseInt(w / ratio, 10); canvas.width = w; canvas.height = h; }, false); function snap() { context.fillRect(0, 0, w, h); context.drawImage(video, 0, 0, w, h); } //]]></script>
بعد تشغيل الكود قم بتحديد الثواني او الوقت للفديو الذي تريده ثم أضغط علي زر snap shot وستتم إظهار لقطه الشاشه بلأسفل

كما لاحظت تم إلتقاط الصوره من الفديو التالي :