Question

我在一些ajax查询的帮助下检索多个加密数据，并执行一些操作将所有这些加密块转换为有效视频。现在我在内存中有视频的二进制文件，我被卡住了。我该如何显示它？

为了确保，我已经复制了服务器端的所有步骤，最终输出实际上是一个可播放的视频。所以我唯一的问题是将我的javascript二进制对象显示为视频。

我正在尽力使用网络技术（html5，视频标签，javascript），我想避免在flash中开发我自己的自定义播放器，这是我的最后一个解决方案。

如果你有想法，我很感兴趣。就我而言，我是出于想象。

Answer 1

这是一个简单的例子，它只使用文件输入而不是你通常使用的AJAX。请注意，第一个输入连接到一个函数，该函数将读取该文件并为其返回dataURL。

但是，由于您没有fileObject，而是拥有表示文件内容的数据流，因此您无法使用此方法。所以，我已经包含了第二个输入，它连接到一个只将文件作为二进制字符串加载的函数。然后，在转换为dataURL之前，使用浏览器功能“手动”对该字符串进行base64编码。为此，您需要知道要处理的文件类型才能正确构建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);}

// callback gets data via the .target.result field of the param passed to it.
function loadFileObject(fileObj, loadedCallback)
{
    var reader = new FileReader();
    reader.onload = loadedCallback;
    reader.readAsDataURL( fileObj );
}

// callback gets data via the .target.result field of the param passed to it.
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 = "data:video/mp4;base64," + b64Result;
            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>

Answer 2

要显示您的视频，您需要获取该视频的网址，以便您能够将参考传递给视频元素。

URL.createObjectURL应该为您提供这样的URL来引用您的数据。有关详细说明，请参阅https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL，并注意兼容性表。

Mozilla在https://developer.mozilla.org/samples/domref/file-click-demo.html上托管了一个显示本地文件的示例。应该可以将其改为设置视频元素的src属性。根据您存储数据的方式，应该可以通过这种方式播放视频。

我在Firefox中尝试使用来自File对象的数据，该对象为我留下了可用于播放视频的网址blob:https://developer.mozilla.org/ed2e4f2f-57a6-4b06-8d56-d0a1a47a9ffd。

从内存源播放html5视频

2 个答案: