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?
"Safari is a common browser for Mac users, but there are some features with Canvas that don't work well in Safari"
I found this info on This Website
That Might Be It But I'm Not Fully Sure