尝试使用经典< video src =“http://myserver/video.mp4”>切换我的视频流式网络应用程序使用blob的URL来避免在页面上的简单Ctrl上完全下载.

似乎必须使用XMLHttpRequest来允许从远程视频文件创建blob.

问题是XMLHttpRequest下载整个文件,这不适用于渐进式下载使用.

以下代码是从远程文件加载blob的最简单示例.

var r = new XMLHttpRequest();
r.onload = function() // Triggered only when all video is downloaded
{
    video.prop("src",URL.createObjectURL(r.response));
};

r.open("GET","http://myserver/video.mp4");
r.responseType = "blob";
r.send();

由于应用程序用于视频流,因此该方法不可用(除非我们希望用户等待X分钟以下载整个文件,而根本不是流式传输).

有没有办法将blob与渐进式下载结合起来?

解决方法

仅使用src =“foo.mp4”方法时,渐进式下载应该是浏览器中的默认行为.但是,播放体验取决于文件的实际格式.

“普通”MP4文件不是为流媒体设计的.它们的结构使得开始播放所需的数据可以在文件的开头和结尾之间分开.因此,玩家可能需要缓冲整个事物以获得开始播放所需的数据.

您可以尝试使用MP4Box之类的工具将普通MP4转换为碎片MP4,并指定“-frag”选项.这将重新排列文件中的数据,以便所有初始化数据位于前端,文件的其余部分分解为块.

更复杂的选择是使用像MPEG-DASH这样的东西.通过利用MP4Box和dash.js,您可以设置一个完全成熟的自适应流媒体播放器.

Javascript视频blob和渐进式下载的更多相关文章

  1. 浅析HTML5中的download属性使用

    这篇文章主要介绍了浅析HTML5中的download属性使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  2. HTML5 Blob 实现文件下载功能的示例代码

    这篇文章主要介绍了HTML5 Blob 实现文件下载功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. Html5实现首页动态视频背景的示例代码

    这篇文章主要介绍了Html5实现首页动态视频背景的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  4. web字体加载方案优化小结

    这篇文章主要介绍了web字体加载方案优化小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. ios – MPMoviePlayerController不播放本地文件

    >file:///Users/utkal/Library/ApplicationSupport/iPhoneSimulator/7.0.3/Applications/F0B3AD63-7E46-4069-8845-8B0C05425CD2/CosMos.app/PTCL.mp4我得到第一个代码的videURL路径>file:///Users/utkal/Library/ApplicationSup

  6. Swift - SQLite中Data类型数据的插入、读取BLOB类型字段

    本文演示如何实现Data类型的数据存取。1,实现原理首先我们建表的时候,用于保存Data数据的字段要使用大数据类型,比如:BLOB读取操作同其他数据类型的读取没什么差别。不过插入的时候要注意,不能直接将数据拼接到sql语句中,而是要使用预处理语句:12letsql="insertintot_imagevalues(?表字段很简单,就一个ID主键,和一个BLOB类型的字段点击“保存”按钮,将项目中的0.png这张图片存储到图片表中。Data//将Data数据插入到数据库"insertintot_imagev

  7. MvvmCross:从android中的MvxListView获取所选项目的最佳方法是什么?

    我正在使用MvvmCrossv3.06,我在android中定义了一个绑定到列表的MvxListView.我可以看到列表,但无法确定获取单击它时所选项目的最佳方法.目前我在活动的OnCreate中执行以下操作,但它不是特别是MVVM,我想知道是否有更好的方法通过绑定?

  8. 在Android中添加音频到视频

    我想开发一个可以录制视频的Android应用程序,然后我的资源文件夹中有一些音频文件,我想将其添加到视频的末尾.所以最终的效果就像是首先播放视频,在视频结束时,增加的音频将会被听到.我该怎么做?解决方法使用不同音频编解码器进行组合是不容易的.我会做以下事情:>将MP3文件转换为与视频相同的格式>现在,您可以使用mp4parser的AppendExample将录制的视频附加到预录音>结果将是一个包含视频第一个和声音的MP4文件.全面披露:我是mp4parser的维护者.

  9. recorder.js 基于Html5录音功能的实现

    这篇文章主要介绍了recorder.js 基于Html5录音功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  10. HTML5的Video标签有部分MP4无法播放的问题解析(多图)

    这篇文章主要介绍了HTML5的Video标签有部分MP4无法播放的问题。通过代码展示了设置的过程,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部