如何仅使用Javascript从视频中提取base64 src？

有了一个mp4文件，我们如何仅使用javascript从中创建base64 src

例如，如果他有一个名为example.mp4的mp4文件，位于/assets/video/example.mp4，那么如何使用Javascript从中提取base64数据以创建一个html标记，如下面的示例所示

<video id="video" width="740" controls>
  <source type="video/mp4" src="data:video/mp4;base64,[VIDEO BASE64 DATA HERE]">
</video>

与此相反：

<video id="video" width="740" controls>
  <source type="video/mp4" src="/assets/video/example.mp4">
</video>

---

这样做的动机是因为我需要将加密文件（例如视频或图像等）从一个地方传输到另一个地方。所以我需要使用Javascript，提取数据，加密数据，然后传输。我们如何做到这一点？

这可能是一个答案，但我还没有测试：MooTools

---

您是否能够修改该代码，以便用户无需提供文件

---

这是为了能够像您最初想要的那样编码，通过知道文件的位置并自动进行编码，而无需用户的干预。

我不会用JS做这件事。。。JS真的不能处理这样的事情。你说的加密/解密是什么意思？为什么文件不能在传输时保持加密？用户将指示文件，浏览它。文件将不加密，在此之后将加密。

<div>
    <div>
        <label for="filePicker">Choose or drag a file:</label><br>
        <input type="file" id="filePicker">
    </div>
    <br>
    <div>
        <h1>Base64 encoded version</h1>
        <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>
    </div>
</div>



var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];

    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);
    }
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('filePicker').addEventListener('change', handleFileSelect, false);
} else {
    alert('The File APIs are not fully supported in this browser.');
}