这里是一个快速示例，它只使用文件输入而不是通常使用的 AJAX。注意第一个输入被连接到一个函数，该函数将读取文件并返回数据 URL。
然而，由于你没有一个文件对象，而是有一个表示文件内容的数据流，所以你不能使用这种方法。因此，我包括了第二个输入，它连接到一个函数，仅将文件加载为二进制字符串。然后，这个字符串被手动用浏览器函数进行 base64 编码，然后转换为数据 URL。为了做到这一点，你需要知道正在处理的文件类型，以便正确构造 URL。
即使在这台 i7 笔记本电脑上，加载速度也相当缓慢，并且可能会像没人的事情一样占用内存——移动电话可能会晕倒（我还没有测试过）。
你应该能够获取数据流并从我有原始数据的地方继续进行处理（
var rawResult = evt.target.result;）
错误检查留给读者作为练习。
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
function loadFileObject(fileObj, loadedCallback)
{
var reader = new FileReader();
reader.onload = loadedCallback;
reader.readAsDataURL( fileObj );
}
function loadFileAsBinary(fileObj, loadedCallback)
{
var reader = new FileReader();
reader.onload = loadedCallback;
reader.readAsBinaryString( fileObj );
}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
byId('fileInput1').addEventListener('change', onFileInput1Changed, false);
byId('fileInput2').addEventListener('change', onFileInput2Changed, false);
}
function onFileInput1Changed(evt)
{
if (this.files.length != 0)
{
var curFile = this.files[0];
loadFileObject(curFile, onVideoFileReadAsURL);
function onVideoFileReadAsURL(evt)
{
byId('vidTgt').src = evt.target.result;
byId('vidTgt').play();
}
}
}
function onFileInput2Changed(evt)
{
if (this.files.length != 0)
{
var curFile = this.files[0];
loadFileAsBinary(curFile, onVideoFileReadAsBinary);
function onVideoFileReadAsBinary(evt)
{
var rawResult = evt.target.result;
var b64Result = btoa(rawResult);
var prefaceString = "data:" + curFile.type + ";base64,";
byId('vidTgt').src = prefaceString + b64Result;
byId('vidTgt').play();
}
}
}
</script>
<style>
</style>
</head>
<body>
<input type='file' id='fileInput1'/>
<input type='file' id='fileInput2'/>
<video id='vidTgt' src='vid/The Running Man.mp4'/>
</body>
</html>
