يمكن لموقع الفيديو العام التقاط لقطة شاشة للفيديو الذي تم تشغيله بواسطة المستخدم الذي تم تحميله بواسطة المستخدم. يمكن أيضًا تقديم هذه الوظيفة في المشروع لمنح المستخدمين تجربة جيدة ، بدلاً من السماح للمستخدمين بتحميل مخطط عرض إضافي.
خريطة التأثير:
لا يزال يبدو جيدًا.
_canvas = document.createelement (canvas) ؛ = _canvas.todaurl (صورة/png) ؛
الرمز الأساسي هو هذه الخطوط. هذه هي النقطة الرئيسية.
دعونا نلقي نظرة على المثال كله:
HTML:
<! العرض: 60px Auto 0 ؛ 5px ؛ type = text/javaScript src = ../../../jquery -.8.3.js> </script> <script type = text/javaScript src = videoShot.js> </scri. Text/JavaScript> $ (function () {Zhanghongyang.click2shot.init () ؛}) ؛كل من HTML و CSS بسيطة للغاية.
يعتمد بشكل أساسي على مدونة JS:
/ ** تم إنشاؤها مع jetbrains webstorm .click2shot = (function () {var _id_video = video ؛ var _id_shotbar = shotbar ؛ var _videowidth = 0 ؛ var _videoheight = 0 ؛ var_canvas = null ؛ tx = null ؛ var _video = function _init () {_canvas = document. CreateElement (canvas) ؛ ؛ ) ؛ ، _videoheight) ؛ اليسار: _video.offsetlect ، أعلى: = $ (img>) ؛ إضافة تأثير الرسوم المتحركة $ imgbig.animate ({يسار: رسمي. function () {$ img.attr (src ، dataurl) .show () ؛ {x: (number | number) ، y: (number | number)} * priving */ function_getoffset (ele m) {var pos = {x: elem.offsetleft ، y: elem.offsettop} ؛ OffsEdparent.تجدر الإشارة إلى أنه بعد الحصول على السمات وبعض العمليات في الحدث. عند النقر فوق الحادث ، سيتم تعليق الفيديو ، ثم يتم إنشاء صورة في موقع الفيديو.
بعد الحصول على الصور ، يمكنك إضافتها بنفسك. هناك نقطة مهمة للغاية: Canvas.Todataurl (Image/PNG) ؛ مشكلة الأمن
ما سبق هو كل محتويات هذا المقال.