Question

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

例如，如果他有一个位于 /assets/video/example.mp4 的名为 example.mp4 的mp4文件，如何使用它从中提取base64数据Javascript创建一个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，提取数据，加密然后传输。我们怎么做到这一点？

Answer 1

这可能是一个答案，但我还没有测试过:( 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.');
}

Answer 2

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

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

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

2 个答案: