El sitio web de video general puede tomar una captura de pantalla del video reproducido por el usuario cargado por el usuario. Esta función también se puede introducir en el proyecto para brindar a los usuarios una buena experiencia, en lugar de dejar que los usuarios carguen un diagrama de visualización adicional.
Mapa de efecto:
Todavía se ve bien.
_canvas = document.createElement (Canvas); = _Canvas.todaurl (imagen/png);
El código central son estas líneas. Ese es el punto clave.
Veamos todo el ejemplo:
HTML:
<! Pantalla: Bloqueo; 5px; type = text/javascript src = ../../../jquery -.8.3.js> </script> <script type = text/javaScript src = videoshot.js> </scri. Text/javascript> $ (function () {zhanghongyang.click2shot.init ();});Tanto HTML como CSS son bastante simples.
Depende principalmente del código de JS:
/ ** * Creado con JetBrains Webstorm. .Click2Shot = (function () {var _id_video = video; var _id_shotbar = shotbar; var _videoWidth = 0; var _videoHeight = 0; var_canvas = null; tx = null; var _vididoo = null; function _init () {_canvas = documento. CreateElement (Canvas); _ctx = _canvas.getContext (2d); ); ); , _VideoHeight); Izquierda: _video.OffSetLect, arriba: _video.Offsettop, ancho: _videowidth + px: _videowidth + px}). = $ (IMg>); Agregar efecto de animación $ imgbig.animate ({izquierda: oficial.x + px, top: oficial.y + px, ancho: $ img.width () + px, altura: $ img.height () + px}, 200, 200, function () {$ img.attr (src, dataUrl) .show (); {x: (número | número), y: (número | número)} * @priving */ function_getoffset (ele m) {var pos = {x: elem.offsetleft, y: elem.offsettop}; OffsetParent;Cabe señalar que después de obtener los atributos y algunas operaciones en el evento Video. Al hacer clic en el incidente, el video se suspenderá y luego se genera una imagen en la ubicación del video.
Después de obtener imágenes, puede agregarla usted mismo. También hay un punto muy importante: Canvas.todataurl (imagen/png); Problema de seguridad.
Lo anterior es todo el contenido de este artículo.