I am making a program that reads a video and displays one second later as an image. The image is displayed correctly on Mac, but the image is not displayed on Safari on iphone. There are no particular errors.
<!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>
What's wrong?
