我试图让这个例子起作用.单击链接时,它工作正常.但是,当我尝试在本地计算机上下载HTML文件并尝试相同时,它会抛出此错误.
不允许加载本地资源:blob:null/6771f68d-c4b8-49a1-8352-f2c277ddfbd4
似乎导致问题的代码行是这样的,
video.src = window.URL.createObjectURL(mediaSource);
这行代码所做的基本上是尝试将视频标记媒体元素的源设置为MediaSource对象.我没有太多运气尝试了各种排列.
我使用的是Chrome版本28.0.1500.72 m,这是最新的稳定版本.
我会很感激任何指针.
我正在尝试Chrome中提供的新MediaSource API.
我正试图将二进制数据从WebSocket动态附加到视频媒体源.
从https://html5-demos.appspot.com/static/media-source.html上的示例开始,我的代码目前是:
var websocket = new WebSocket('ws://localhost:8080');
websocket.binaryType = 'arraybuffer';
var mediaSource = new MediaSource();
var buffer;
var queue = [];
var video = $('.video')[0];
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
video.play();
buffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E"');
buffer.addEventListener('updatestart', function(e) { console.log('updatestart: ' + mediaSource.readyState); });
buffer.addEventListener('update', function(e) { console.log('update: ' + mediaSource.readyState); });
buffer.addEventListener('updateend', function(e) { console.log('updateend: ' + mediaSource.readyState); });
buffer.addEventListener('error', function(e) { console.log('error: ' + mediaSource.readyState); });
buffer.addEventListener('abort', function(e) { console.log('abort: ' + mediaSource.readyState); }); …我们正在尝试使用MSE(媒体来源扩展)在网站上显示实时视频.我们正在通过websocket发送帧,并尽最大努力保持延迟.我们目前的原型在IE,Edge,Chrome,Safari等中流畅.我们遇到的问题是IE和Edge坚持在开始播放视频前大约3-5秒进行缓冲.这在我们的使用案例中是不可接受的(来自安全摄像机的实时视频).我们想知道是否有一些属性或类似(我们已经尝试设置preload = none,但没有成功),这会删除此缓冲？当第一帧添加到sourceBuffer时,所有其他浏览器开心地开始播放,并且我们希望IE/Edge具有相同的行为.您可以为我们建议其他任何解决方法吗？
帧采用ISO BMFF格式
这是我创建的一个再现示例,它测量从第一帧附加到视频开始播放的时间.它使用间隔来欺骗通过websocket到达的数据.
结果:
Browser Delay(ms)
-----------------------
Chrome: ~300
Safari @ Mac: ~7
Chrome @ Android: ~30
IE11 @ Win10: ~3200
Edge: ~3200
这是mp4文件,如果你想检查它.
javascript video-streaming internet-explorer-11 media-source microsoft-edge
我试图通过缺乏不同的描述来实现离线媒体上下文.
这个概念是创造1秒Blob的录制媒体,具有的能力
Blobs独立播放1秒HTMLMediaElementBlobs 播放完整的媒体资源问题是,一旦Blobs被连接起来,媒体资源就不会HTMLMedia使用a Blob URL或者在元素上播放MediaSource.
创建的Blob URL只播放连接Blob的1秒.MediaSource抛出两个例外
DOMException: Failed to execute 'addSourceBuffer' on 'MediaSource': The MediaSource's readyState is not 'open'
和
DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source.
如何正确编码连接的Blobs或以其他方式实现变通方法以将媒体片段作为单个重组媒体资源播放？
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
const src = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4";
fetch(src)
.then(response => response.blob())
.then(blob => …我有一个服务器应用程序,它呈现30 FPS视频流,然后将其实时编码和复用到WebM字节流中.
在客户端,HTML5页面打开一个WebSocket到服务器,当接受连接时,它开始生成流.传递标头后,每个后续WebSocket框架都包含一个WebM SimpleBlock.关键帧每15帧发生一次,当发生这种情况时,将启动一个新的Cluster.
客户端还创建MediaSource,并在从WS接收帧时,将内容附加到其活动缓冲区.在<video>追加第一帧后立即开始播放.
一切都运作得相当好.我唯一的问题是网络抖动导致播放位置在一段时间后偏离实际时间.我目前的解决方案是挂钩updateend事件,检查video.currentTime传入集群上的时间码和时间码之间的差异,并手动更新它currentTime是否超出可接受的范围.不幸的是,这会导致播放中明显的暂停和跳跃,这是相当不愉快的.
该解决方案也有点奇怪:我确切地知道最新的关键帧在哪里,但我必须将其转换为整秒(根据W3C规范)才能将其传递到currentTime其中,浏览器可能必须绕过并找到最近的关键帧.
我的问题是:有没有办法告诉媒体元素总是寻找可用的最新关键帧,或者保持播放时间与系统时钟时间同步？
我知道没有blob网址只有对象.
我为视频缓冲区创建了自己的blob对象,然后在视频标记的src中使用它,类似于blob://website.com/blablobbla.我在它工作的浏览器中打开了这个url
当我打开youtube视频src(blob url)的url到一个新标签时,它没有用,但是我的视频src(blob url)工作了
我想知道如何对我的blob网址执行相同操作,以便它们只能在html视频标记的src中工作,并且在浏览器的外部选项卡/窗口中发出错误或不起作用.我只是想知道这个和blob对象及其url属性背后的技术.
我的 Javascript 应用程序通过 Websocket 连接获取 WebM 视频流。远程对等方发送视频帧和应用程序获取它们之间没有延迟。
我MediaSource在应用程序中创建了一个对象，“附加视频帧”，并让视频元素显示它：
video.src = window.URL.createObjectURL(mediaSource);
这很好用，但有一些（不到一秒）延迟，这可以说使这个解决方案不是视频通话的最佳选择。
显然，一些 WebRTC 应用程序使用MediaStream：
video.srcObject = mediaStream;
...这些显示没有延迟。
我无法从文档浏览器确定是否处理src和srcObject不同。
我找不到的另一件事是，是否可以MediaStream像使用MediaSource. 我想尝试这样做只是为了检查是否srcObject不会导致我的应用程序出现上述延迟。
如果我使用：
video.srcObject = mediaSource;
我收到错误：
类型错误：无法在“HTMLMediaElement”上设置“srcObject”属性：提供的值不是“MediaStream”类型
我有两个这样的标签:
<audio id="1" src="lub0.mp4" />
<audio id="2" src="lub1.mp4" />
我想逐个播放它们,即.play()第一个,当它启动第一个事件时,我将.play()第二个.不幸的是,这给了我一个流行音乐.没有点击,有没有正确的crossbrowser方式来做到这一点？
文件本身很好,如果我在ffmpeg中将它们粘在一起,声音是完美的.
感谢名单.
media-source ×10
javascript ×7
html5 ×4
html5-video ×2
media ×2
audio ×1
blob ×1
bloburls ×1
browser ×1
codec ×1
ffmpeg ×1
fileapi ×1
firefox ×1
html5-audio ×1
mediastream ×1
mp4 ×1
url ×1
video ×1