从内存源播放html5视频 [英] playing html5 video from in memory source
问题描述
我正在借助一些Ajax查询来检索多个加密的数据，并执行一些操作以将所有这些加密的块转换为有效的视频.现在，我已经将视频的二进制文件存储在内存中，因此我陷入了困境.如何显示它?
I am retrieving multiple encrypted data with the help of some ajax queries, and performing some manipulation to transform all theses encrypted chunks into a valid video. And now that I have the binary of the video in memory, I am stuck. How can I display it ?
可以肯定的是，我已经在服务器端复制了所有这些步骤，最终输出的确是可播放的视频.因此，我唯一的问题是将我的JavaScript二进制对象显示为视频.
Just to be sure, I have replicated all theses steps on the server side, and the final output is really a playable video. So my only problem is to display my javascript binary object as a video.
我正在尽力仅使用网络技术(html5，视频标签，javascript)，并且我想避免在Flash中开发自己的自定义播放器，这是我的最后一个解决方案.
I am doing my best to use only web technologies (html5, video tag, javascript) and I would like to avoid developing my own custom player in flash, which is my very last solution.
如果您有想法，我很感兴趣.就我而言，我超出了想象.
if you have an idea, I'm interested. For my part, I am out of imagination.
推荐答案
下面是一个简单的示例，该示例仅使用文件输入而不是您通常使用的AJAX.请注意，第一个输入已连接到一个函数，该函数将读取文件并为其返回dataURL.
Here's a quick example that just uses a file input instead of the AJAX you'd normally be using. Note that the first input is wired up to a function that will read the file and return a dataURL for it.
但是，由于您没有fileObject，而是具有代表文件内容的数据流，因此不能使用此方法.因此，我包括了第二个输入，该输入连接到一个仅将文件作为二进制字符串加载的函数.然后，在将其转换为dataURL之前，使用浏览器功能对其进行手动"编码，以base64对其进行编码.为此，您需要知道要处理的文件类型才能正确构造URL.
However, since you don't have a fileObject, but instead have a stream of data that represents the contents of the file, you can't use this method. So, I've included a second input, which is wired up to a function that just loads the file as a binary string. This string is then base64 encoded 'manually' with a browser function, before being turned into a dataURL. To do this,you need to know what type of file you're dealing with in order to construct the URL correctly.
即使是在这台笔记本电脑i7上，加载速度也相当慢，并且可能像没有人的业务一样消耗内存-手机可能会陷入昏迷状态(我没有用过测试)
It's fairly slow to load even on this laptop i7 and probably sucks memory like no-one's business - mobile phones will likely fall over in a stupor (I haven't tested with one)
您应该能够获取数据流，并从我拥有原始数据的位置继续进行操作( var rawResult = evt.target.result; )
You should be able to get your data-stream and continue on from the point where I have the raw data (var rawResult = evt.target.result;)
错误检查留给读者练习.
Error checking is left as an exercise for the reader.
<!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>
这篇关于从内存源播放html5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
