O site de vídeo geral pode tirar uma captura de tela do vídeo reproduzido pelo usuário enviado pelo usuário. Essa função também pode ser introduzida no projeto para oferecer aos usuários uma boa experiência, em vez de permitir que os usuários enviem um diagrama de exibição adicional.
Mapa de efeitos:
Ainda parece bom.
_Canvas = Document.CreatEELEMENT (Canvas); = _Canvas.todaurl (imagem/png);
O código principal é essas linhas. Esse é o ponto -chave.
Vejamos o exemplo inteiro:
Html:
<! Exibir: margem de 60px: 5px; TIPO = TEXT/JAVASCRIPT SRC = ../../../JQuery -.8.3.js> </sCript> <Script Type = Text/Javascript Src = Videoshot.js> </scri. Texto/javascript> $ (function () {zhanghongyang.click2shot.init ();});Tanto o HTML quanto o CSS são bastante simples.
Depende principalmente do código de JS:
/ ** * Criado com o WebStorm da JetBrains .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; function; CreateElement (Canvas); Eowidth ); _videoHeight); : _video.offsetLect, topo: _video.offsetTop, largura: _videowidth + px, altura: _videowidth + px}). $ (Img>); Efeito de animação $ imgbig.animate ({esquerda: oficial.x + px, topo: oficial.y + px, largura: $ img.width () + px, altura: $ img.Height () + px}, 200, função () {$ 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}; ;Deve -se notar que, após a obtenção dos atributos e algumas operações no evento de vídeo. Ao clicar no incidente, o vídeo será suspenso e, em seguida, uma imagem é gerada no local do vídeo.
Depois de obter fotos, você pode adicioná -las você mesmo. Há também um ponto muito importante: Canvas.todataurl (Image/PNG); Problema de segurança
O acima é todo o conteúdo deste artigo.