Le site Web de la vidéo générale peut prendre une capture d'écran de la vidéo lue par l'utilisateur téléchargé par l'utilisateur. Cette fonction peut également être introduite dans le projet pour offrir aux utilisateurs une bonne expérience, plutôt que de permettre aux utilisateurs de télécharger un schéma d'affichage supplémentaire.
Carte d'effet:
Cela a toujours l'air bien.
_Canvas = Document.CreateElement (Canvas); = _Canvas.todaurl (image / png);
Le code central est ces lignes. C'est le point clé.
Regardons tout l'exemple:
HTML:
<! Affichage: Bloc; 5px; padding: 2px; type = text / javascript src = ../../../jquery -.8.3.js> </ script> <script type = text / javascript src = videoshot.js> </ scri. Text / javascript> $ (function () {zhanghongyang.click2shot.init ();});HTML et CSS sont assez simples.
Cela dépend principalement du code de JS:
/ ** * Créé avec des bornes de remise en ligne. .click2shot = (function () {var _id_video = vidéo; var _id_shotbar = shotbar; var _videowidth = 0; var _videoheight = 0; var_canvas = null; tx = null; var _video = null; function _init () {_canvas = document. CreateElement (Canvas); eowidth ); _videoHeight); : _video.offsetlect, top: _video.offsettop, largeur: _videowidth + px, hauteur: _videowidth + px}). $ (<mg>); $ img.attr (src, dataurl); Effet d'animation $ imgbig.animate ({Left: officiel.x + px, top: officiel.y + px, largeur: $ img.width () + px, hauteur: $ img.height () + px}, 200, fonction () {$ img.attr (src, dataUrl) .show (); $ imgbig.remove (); x: (nombre | nombre), y: (nombre | nombre)} * @priving * / function_getoffset (ele m) {var pos = {x: elem.offsetleft, y: elem.offsetTop}; ;Il convient de noter qu'après avoir obtenu les attributs et certaines opérations dans l'événement vidéo.Canplay, assurez-vous de supprimer leventLinstener, sinon cette méthode sera toujours appelée. Lorsque vous cliquez sur l'incident, la vidéo sera suspendue, puis une image est générée dans l'emplacement de la vidéo.
Après avoir obtenu des photos, vous pouvez l'ajouter vous-même. Il y a également un point très important: canvas.todataurl (image / png); Problème de sécurité.
Ce qui précède est tout le contenu de cet article.