1. Requisitos: cargar un video e interceptar un determinado fotograma del video como portada del video.
2. Idea de implementación: utilice la función de dibujo de imágenes del lienzo para dibujar un determinado cuadro de la imagen. Aquí se dibuja el primer cuadro, lo cual es muy simple de implementar.
3. Código:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>capturar pantalla</title> <style type=text/css> video,#container{ancho: 300px;alto: 200px;} #container>img{ancho: 100%;} </style></head><body> <video id=video controles=controles> <fuente src=video/video_test.mp4> </video> <div id=contenedor></div> <script type=text/javascript> (función() { var video, contenedor; var escala = 0.8; var inicializar = función( ) { contenedor = document.getElementById(contenedor); vídeo = document.getElementById(vídeo);addEventListener('loadeddata', captureImage); }; var captureImage = function() { var canvas = document.createElement(canvas); canvas.width = video.videoWidth * escala; canvas.height = video.videoHeight * escala; vídeo, 0, 0, lienzo.ancho, lienzo.alto; var img = document.createElement(img.src); canvas.toDataURL(image/png);// Convertir a imagen base64, sacar la dirección y usarla directamente container.appendChild(img }; inicialize() })(); < /html>Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.