HTML5视频：带Blob URL的流式视频
我有一个blob数组（实际上是二进制数据--我可以表达它是最有效的。我现在使用Blobs，但可能uint8array或其他更好的方法）。每个Blob包含1秒的音频/视频数据。每秒都会生成一个新的Blob并将其追加到我的数组中。因此代码大致如下所示：
var arrayOfBlobs = [];
setInterval(function() {
arrayOfBlobs.append(nextChunk());
}, 1000);
我的目标是将此音频/视频数据流式传输到HTML5元素。我知道Blob URL可以像下面这样生成和播放：
var src = URL.createObjectURL(arrayOfBlobs[0]);
var video = document.getElementsByTagName("video")[0];
video.src = src;
// Something like this (untested)
var concatenatedBlob = new Blob(arrayOfBlobs);
var src = ...
共有1个答案
在一些重要的谷歌搜索后，我设法找到了拼图中缺失的部分：媒体资源
实际上，该过程如下所示：
- 创建
mediasource - 从
媒体源创建对象URL
- 将视频的
src设置为对象URL - 在
SourceOpen事件上，创建SourceBuffer - 使用
sourceBuffer.appendBuffer()将所有块添加到视频中
-
null
<html>
<head>
</head>
<body>
<video id="video"></video>
<script>
// As before, I'm regularly grabbing blobs of video data
// The implementation of "nextChunk" could be various things:
// - reading from a MediaRecorder
// - reading from an XMLHttpRequest
// - reading from a local webcam
// - generating the files on the fly in JavaScript
// - etc
var arrayOfBlobs = [];
setInterval(function() {
arrayOfBlobs.append(nextChunk());
// NEW: Try to flush our queue of video data to the video element
appendToSourceBuffer();
}, 1000);
// 1. Create a `MediaSource`
var mediaSource = new MediaSource();
// 2. Create an object URL from the `MediaSource`
var url = URL.createObjectURL(mediaSource);
// 3. Set the video's `src` to the object URL
var video = document.getElementById("video");
video.src = url;
// 4. On the `sourceopen` event, create a `SourceBuffer`
var sourceBuffer = null;
mediaSource.addEventListener("sourceopen", function()
{
// NOTE: Browsers are VERY picky about the codec being EXACTLY
// right here. Make sure you know which codecs you're using!
sourceBuffer = mediaSource.addSourceBuffer("video/webm; codecs=\"opus,vp8\"");
// If we requested any video data prior to setting up the SourceBuffer,
// we want to make sure we only append one blob at a time
sourceBuffer.addEventListener("updateend", appendToSourceBuffer);
});
// 5. Use `SourceBuffer.appendBuffer()` to add all of your chunks to the video
function appendToSourceBuffer()
{
if (
mediaSource.readyState === "open" &&
sourceBuffer &&
sourceBuffer.updating === false
)
{
sourceBuffer.appendBuffer(arrayOfBlobs.shift());
}
// Limit the total buffer size to 20 minutes
// This way we don't run out of RAM
if (
video.buffered.length &&
video.buffered.end(0) - video.buffered.start(0) > 1200
)
{
sourceBuffer.remove(0, video.buffered.end(0) - 1200)
}
}
</script>
</body>
</html>
另外一个好处是，这将自动为实时流提供DVR功能，因为您在缓冲区中保留了20分钟的视频数据（您可以通过使用video.currenttime=...)来查找
-
我三个跟随本教程（http://codesamplez.com/programming/php-html5-video-streaming-tutorial）使用php类创建流式视频。 所以我有两个问题： 1-我也试图流到一个播放器，但视频正在接管我的整个页面如何使视频只是添加到我的html5播放器。 2-当我创建一个不起作用的url http视频(http://video.newsmed.fr/
-
function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest
-
我试图在基于bootstrap 2.2.2的设计中嵌入HTML5视频，但它在Firefox上不起作用，但它在chrome上运行良好，但在Firefox上说我尝试将这些添加到.htaccess文件中，并将其上传到根目录中，但这也没有帮助。 null 注意：我看了前面关于stackoverflow的问题，但没有运气，而且我没有apache配置文件来允许视频样式，因为我是在共享主机上。
-
我使用aws kinesis video stream webRTC在reactjs中进行视频聊天。一切都很好。但是我想把视频存储在s3 Bucket中。我应该如何实现这个视频存储？
-
问题内容： 我要实现以下目标。 目的是使用户能够从他/她的硬盘驱动器中选择文件。 不上传的原因当然是传输成本和存储配额。没有理由保存文件。 可能吗？ 问题答案： 可以播放本地视频文件。 通过元素选择文件时： “更改”事件被触发 从获取第一个File对象 制作指向File对象的对象URL 将对象URL设置为属性 靠后看
-
问题内容： 关于YouTube API博客，他们正在试验新的 HTML5 视频播放器。 显然，要使用html5播放视频，您必须使用iframe嵌入代码： 但是，如果客户端尚未加入HTML5试用版，则即使客户端的浏览器支持HTML5视频，播放器也会自动退回到Flash播放器中。 如果用户尚未参与HTML5试用版，即使浏览器支持，如何强制HTML5视频播放？ 否则，如何禁用Flash后备广告？ 问题答