1. Requisitos: Carregue um vídeo e intercepte um determinado quadro do vídeo como capa do vídeo.
2. Idéia de implementação: Use a função de desenho de imagem do canvas para desenhar um determinado quadro da imagem. O primeiro quadro é desenhado aqui, o que é muito simples de implementar.
3. Código:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>capturar tela</title> <style type=text/css> vídeo,#container{largura: 300px;altura: 200px;} #container>img{largura: 100%;} </style></head><body> <video id=video controles=controls> <fonte src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var video, container; var scale = 0.8; var inicializar = function( ) {container = document.getElementById(container); video = document.getElementById(video); }; var captureImage = function() { var canvas = document.createElement(canvas); canvas.width = video.videoWidth * scale; vídeo, 0, 0, canvas.width, canvas.height); canvas.toDataURL(image/png);//Converta para imagem base64, retire o endereço e use-o diretamente container.appendChild(img); </html>O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.