全ビット反転された動画ファイルを表示してループ再生で再生できるJavaScript(とHTML)のコード
全ビット反転された動画ファイルであるバイナリーファイルを全ビット反転し直して元に戻してからBase64形式のテキスト データに変換して、HTMLのvideoタグを作って、Base64形式のテキスト データをvideoタグのsrc属性に設定します。
注意点としては、原因は不明ですが動画には全ビット反転すると元に戻してもブラウザがエラーを発生させてしまう物が有りますし、サイズが大き過ぎる動画はブラウザーがメモリー不足エラーを発生させてしまいます。
不具合が有るかもしれないので利用は自己責任でお願いいたします。
コピーする場合は、2文字の全角空白を4文字の半角空白に置換してください。
.htmlファイルでUTF-8という文字コードで保存してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ビット反転ループ動画プレイヤー</title>
</head>
<body>
<div>
ビット反転動画ファイル選択 <input type="file" id="file" multiple />
</div>
<br />
<div>
<button type="button" id="showBitFlippedMovie">ビット反転ループ動画表示</button>
</div>
<br />
<p id="message"></p>
<br />
<div id="videos"></div>
<script>
function $(id) {
return document.getElementById(id);
}
function readAsArrayBufferSync(file) {
return new Promise(function (resolve, reject) {
var fileReader = new FileReader();
fileReader.onload = function () { resolve(fileReader.result); };
fileReader.onerror = function () { reject(fileReader.error); };
fileReader.readAsArrayBuffer(file);
});
}
$("showBitFlippedMovie").onclick = async function () {
var files = $("file").files;
if (files.length == 0) {
$("message").innerHTML = "ビット反転動画ファイルを選択してください。";
return;
}
$("message").innerHTML = "ビット反転動画ファイルを処理中です……。";
$("videos").innerHTML = "";
for (var index = 0; index < files.length; index++) {
var file = files[index];
var arrayBuffer = await readAsArrayBufferSync(file);
var size = arrayBuffer.byteLength;
var dataView = new DataView(arrayBuffer);
//ビット反転してからJavaScriptの「バイナリー文字列」に変換
var jsBinaryString = "";
for (var byteIndex = 0; byteIndex < size; byteIndex++) {
jsBinaryString += String.fromCharCode(((~ dataView.getUint8(byteIndex)) >>> 0) & 0xff);
}
var divElement = document.createElement("div");
var brElement = document.createElement("br");
var videoElement = document.createElement("video");
videoElement.width = "500";
videoElement.loop = "loop";
videoElement.controls = "controls";
videoElement.src = "data:video/mp4;base64," + btoa(jsBinaryString);
divElement.appendChild(brElement);
divElement.appendChild(videoElement);
$("videos").appendChild(divElement);
}
$("message").innerHTML = "";
};
</script>
</body>
</html>
