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

How to extract base64 src from a video using just Javascript?

本文关键字：提取 base64 src 视频 何仅使 Javascript      更新时间：2024-04-29

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

例如，如果他在/assets/video/example.mp4中有一个名为example.mp4的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）

http://jsfiddle.net/eliseosoto/JHQnk/

<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.');
}

您是否能够调整该代码，以便用户无需提供文件？

也就是说，通过知道文件的位置，能够像最初想要的那样进行编码，并在没有用户干预的情况下自动进行编码。

相关文章：