Estoy creando un programa que lee un video y lo muestra un segundo después como una imagen. La imagen se muestra correctamente en Mac, pero la imagen no se muestra en Safari en iPhone. No hay errores particulares.
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <input id="input" type="file" accept="video/*"> <video hidden id="video" width="780" height="1280" controls="false"></video> <svg hidden id="svg" width="100%" height="100%" viewBox="0 0 720 1080"> <image id="image" width="320" height="300" href="" /> </svg> <script> const video = document.querySelector('video'); input.onchange = event => { let reader = new FileReader(); reader.readAsDataURL(input.files[0]); reader.onload = function () { video.src = reader.result video.load(); }; } video.addEventListener('seeked', function () { document.getElementById("image").setAttribute('href', toDataURL(video)) }); video.addEventListener('loadeddata', function () { video.currentTime = 1; }) function toDataURL(target, type) { const canvas = document.createElement('canvas') canvas.width = target.width canvas.height = target.height canvas.getContext('2d').drawImage(target, 0, 0, target.width, target.height) canvas.getContext("webkit-3d", { preserveDrawingBuffer: true }); canvas.type = "hidden"; return canvas.toDataURL() } </body>¿Qué ocurre?
"Safari es un navegador común para los usuarios de Mac, pero hay algunas funciones con Canvas que no funcionan bien en Safari"
Encontré esta información en este sitio web
Podría ser eso, pero no estoy completamente seguro