Estoy tratando de crear una función en la que un cierto período de tiempo de un video se muestre como una imagen. la función acepta 2 entradas, a saber, la ruta al video y el segundo determinado , donde se debe mostrar el marco de tiempo.
<!DOCTYPE html> <html> <body> <div id="imageDiv" width="350" height="200" style="border:1px solid #c3c3c3;"> </div> <video id="myVideo" width="320" height="176" controls> </video> <script type="text/javascript"> // src will be the path to the video // sec will be the second we want to display from the video function dispImg(src, sec) { var video = document.getElementById("myVideo"); video.src = src; video.type = "video/mp4"; video.currentTime = sec; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(video, 0, 0, 350, 200); document.getElementById("imageDiv").appendChild(canvas); } dispImg("sample.mp4", 10) </script> </body> </html>de mi código actual, espero que la miniatura que se muestra en la sección de video (id="myVideo") también se dibuje en la sección div (id="imageDiv"). desafortunadamente no es el caso, ya que todo es blanco en la sección div.
¿Hay alguna sugerencia para mi problema? ¡Gracias por cualquier re-alimentación!
Es probable que el video no se haya cargado lo suficiente o no haya terminado de buscar en el momento en que llamas a drawImage .
Si esa es la causa, puede esperar a que se active un evento, como este:
function dispImg(src, sec) { var video = document.getElementById("myVideo"); video.src = src; video.type = "video/mp4"; // For more events, see: // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events video.addEventListener('seeked', (event) => { var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); ctx.drawImage(video, 0, 0, 350, 200); document.getElementById("imageDiv").appendChild(canvas); }); // After creating the event handler, change the position of the video. video.currentTime = sec; } Creo que cuando usa el evento canplaythrough seeked
Es posible que desee ver este ejemplo JSFiddle Timeline por kmturley
function createImage() { var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight); timeline.appendChild(canvas); }