Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <link rel='shortcut icon' href=''>
    <title>read as an array buffer</title>
</head>

<body>
    <form id='fileUploadForm' enctype='multipart/form-data'>
        <input type='file' name='file' id='file-input' />
    </form>
    <div id='display-types'></div>
</body>
<script>
    const mimeTypes = {
        '4f676753': 'video/ogg',
        '00000020': 'video/mp4',
        '00000014': 'video/quicktime',
        '3026b275': 'video/x-ms-wmv',
        '1a45dfa3': 'video/webm'
    };
    const fileInput = document.getElementById('file-input');
    fileInput.addEventListener('change', (event) => {
        const videoFile = event.target.files[0];
        const fileReader = new FileReader();
        fileReader.onload = () => {
            const arrayBuffer = fileReader.result;
            const unsignedInteger8View = new Uint8Array(arrayBuffer);
            let magicNumbers = '';
            unsignedInteger8View.forEach((byte) => {
                if (byte.toString().length === 1) {
                    // appending below to create a fixed string length of two characters/UTF-8 representation
                    magicNumbers += "0" + byte.toString(16)
                } else {
                    magicNumbers += byte.toString(16)
                }
            });
            const display = document.getElementById('display-types');
            display.innerHTML = `The MIMEtype for this video is: ${mimeTypes[bytes]}`
        }
        const first4Bytes = videoFile.slice(0, 4);
        fileReader.readAsArrayBuffer(first4Bytes);
    });
</script>

</html>