The general video website can take a screenshot of the video played by the user uploaded by the user. This function can also be introduced in the project to give users a good experience, rather than letting users upload an additional display diagram.
Effect map:
It still looks good. Let me analyze it below. The extremely core code is very simple:
_canvas = document.createelement (canvas); _ctx = _Canvas.getContext (2D); owidth); _CTX.DrawImage (_video, 0, 0, 0, 0, _videowidth, _Videoheight, 0, 0, _Videowidth, _Videoheight); var dataurl = _CANVAS.TODAURL (Image/PNG);
The core code is these lines. When using CTX.DrawImage, the first parameter can be the Video object, and then the DataURL is obtained through Canvas and assigned to the IMG label. That's the key point.
Let's look at the whole example:
Html:
<! Doctype html> <html> <head> </title> <meta charset = UTF-8> <Style Type = Text/CSS> html {oven: hidden;} body {Background-color: #999; } Video {display: block; margin: 60px auto 0;} #Shotbar {posity: absolute; 5px; height: 120px; 98%; background-money: # 000; Box -shadow: -5px -5px 10px #fff; Border-Radius: 5px; Padding: 2px; Overflow: Auto;} #Shotbar img {border: 3px solid #fff; border-radius: 5px; height: 110px; width: 2110 px; margin-heft: 4px;} </style> <script type = text/javascript src = ../../../jquery -.8.3.js> </script> <Script Type = Text/JavaScript src = videoshot.js> </scri. PT > <Script Type = Text/Javascript> $ (Function () {zhanghongyang.click2shot.init ();}); p4 controls id = video > </video> <div ID = Shotbar> </DIV> </Body> </html>Both HTML and CSS are quite simple.
It mainly depends on the code of JS:
/ ** * Created with jetbrains webstorm. * User: zhy * date: 14-6-18 * Time: 12:24 am * to change this test use file | settings | file templates. */ Var Hongyang = {}; zhanghongyang .click2shot = (function () {var _id_video = video; var _id_shotbar = shotbar; var _videowidth = 0; var _videoheight = 0; VAR_CANVAS = Null; tx = null; var _video = null; function _init () {_canvas = document.createelement (canvas); _ctx = _Canvas.getContext (2D); nction () {_canvas.width = _videowidth = _video.Videowidth; _CANVAS.HEIGHT = _Videoheight = _video.Videoheight; console.log (_Videowidth +, + _Videoheight); eOWIDTH); $ (# + _id_shotbar) .clICK (_Click2shot); _video.removeeventListener (Canplay, Arguments.callee);});} Function _Click2shot (Event) {_video.pause (); deowidth, _Videoheight, 0, 0, _Videowidth, _videoheight); var datall = _CANVAS.TODAURL (Image/PNG); // Create a picture of the same position as Video VAR $ iMGBig = $ (<IMG/>); ht) .css ({{ POSITION: AbSolute, left: _video.offsetlect, TOP: _video.Offsettop, Width: _videowidth + PX, Height: _Videowidth + PX}). ; Body) .append ($ Imgbig); // Create a thumbnail, prepare to add to Shotbar Var $ img = $ (<IMG>); $ img.attr (src, dataurl); $ (this) .appnd ($ img); var Offset = _getOffset ($ img [0] ); $ img.hide (); // Add animation effect $ imgbig.animate ({left: official.x + px, top: official.y + px, width: $ img.width () + px, height: $ img.Height () + px}, 200, function () {$ img.attr (src, dataurl) .show (); $ imgbig.remove (); _video.play ();});} /*** LEFTOFFSET and TOPOFFFSET * @param Elem * @Return {{x: (number | number), y: (number | number)} * @Priving */ Function_Getoffset (ELE m) {var pos = { X: Elem.OffsetLeft, Y: Elem.OffSettop}; VAR OffsetParent = ELEM.OffSetParent; While (Offsetparent) {POS.X += Offset PAREATLEFT; POS. y += officialparent.offsettop; Officetparent = Officetparent.offsetparent;} Return pos;} Return {Init: _init}}) ();It should be noted that after obtaining the attributes and some operations in the Video.canplay event, be sure to RemoveeventLinstener, otherwise this method will always be called. When clicking the incident, the Video will be suspended, and then a picture is generated in the location of Video. It uses jquery animation to move to the position of the thumbnail, and then removes the document. The thumbnail display is displayed.
After obtaining pictures, you can add it yourself. There is also a very important point: Canvas.todataurl (Image/PNG); you may need to be accessed in the server to use it normally. I drag the written pages into Tomcat. You can start what server, otherwise you will report the security problem. Essence
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.