1. Anforderungen: Laden Sie ein Video hoch und fangen Sie einen bestimmten Frame des Videos als Cover des Videos ab.
2. Implementierungsidee: Verwenden Sie die Bildzeichnungsfunktion von Canvas, um einen bestimmten Rahmen des Bildes zu zeichnen, was sehr einfach zu implementieren ist.
3. Code:
<!DOCTYPE html><html><head> <meta charset=UTF-8> <title>Bildschirmaufnahme</title> <style type=text/css> video,#container{width: 300px;height: 200px;} #container>img{width: 100%;} </style></head><body> <video id=video states=controls> <source src=video/video_test.mp4> </video> <div id=container></div> <script type=text/javascript> (function() { var video, container; var scale = 0.8; var initialize = function( ) { Container = document.getElementById(container); video = document.getElementById(video.addEventListener('loadeddata', captureImage); }; var captureImage = function() { var canvas.width = video.videoWidth * scale; video, 0, 0, Canvas.width, Canvas.height); var img = document.createElement(img.src =). canvas.toDataURL(image/png);/In Base64-Bild konvertieren, die Adresse herausnehmen und direkt verwenden. container.appendChild(img })(); < /html>Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.