Media Source Extensions

这应该是目前写的最为完整的关于 Web 视频播放的文章。从简单的 Video 元素到 MSE 直播的应用，作者给出了具体的代码，文章由浅入深，普及现代 Web 播放技术的前前后后。五星推荐阅读。 @Paul Berberian 原文地址: https://medium.com/canal-tech/how-video-streaming-works-on-the-web-an-introduction-7919739f7e1 注意：本文是JavaScript视频流的介绍，主要针对Web开发人员。这里的大部分示例都使用HTML和现代JavaScript（ES6）。如果您对它们还不够熟悉，那么您可能会发现很难继续学习，尤其是代码示例。原生视频 API 从2000年代初期到后期，网络上的视频播放主要依靠Flash插件。 ** 警告用户安装Flash插件 ** 这是因为当时没有其他方法可以在浏览器上流式传输视频。作为用户，您可以选择安装Flash或Silverlight之类的第三方插件，还是根本无法播放任何视频。为了填补这个空白，WHATWG 开始研究 HTML 标准的新版本，其中包括本地的视频和音频播放。苹果公司在其产品上禁用 Flash 后，这一趋势更加明显。而该标准后面成为现在的 HTML5 的标准。因此，HTML5除其他新的标签外，将 < 详情 »

2019-07-11

查看详情

使用 JS 获取视频 Codec

如果第一次接触 Media Source ，大家都会注意到有一个关于视频 codecs 的指定。 var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); //console.log(mediaSource.readyState); // closed video.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', sourceOpen); } else { console.error('Unsupported MIME type or codec: ', 详情 »

2018-03-20

查看详情

Media Source 系列 - 结合 range 控制媒体请求缓存大小

上一篇写了 Media Source 系列 - 播放 m3u8 文件 , 写了使用 MSE 来播放一个包含分片内容的资源。同样除此之外，我们可以借助 MSE 来进行更加细粒的缓存控制调度。 HTTP Range HTTP Range ，HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件，或者与文件下载的断点续传功能搭配使用时非常有用。假如在响应中存在 Accept-Ranges 首部（并且它的值不为 “none”），那么表示该服务器支持范围请求。比如我们请求一个视频的一部分: $ curl http://localhost:8000/media-source/vdeoplayback.mp4 -i -H "Range: bytes=0-1023" 使用 fetch 请求视频的一部分内容正如前面提到了，如果服务器支持请求 range 的内容，详情 »

2018-03-12

查看详情

Media Source 系列 - 播放 m3u8 文件

前一篇文章《使用 Media Source Extensions 播放视频》我们大致写了 Media Source Extensions, MSE 的基本介绍和使用。这篇文章是在之前基础上完成的，文章将实现如何借助 MSE 来播放流文件比如 m3u8 或者 dash。自己之前在知乎上回答过这个问题有支持M3U8格式的HTML5播放器吗？有简单说一些基本实现思路，但是没有贴实现的代码，因为已经有很多前端开源的播放器了比如 hls.js, 不过今天这篇文章会贴出一些基本的代码来实现这块逻辑；了解 m3u8 文件 HLS, HTTP Live Streaming 苹果公司针对iPhone、iPod、iTouch和iPad等移动设备而开发的基于HTTP协议的流媒体解决方案。在App Store中的视频相关的应用，基本都是应用的此种技术。该技术基本原理是将视频文件或视频流切分成小片(ts)并建立索引文件(m3u8)。参考上图，HLS 的架构基本都是会将一个完整的视频分割成不同的小视频，然后通过索引文件 m3u8 建立起联系；我们可以看下自己使用 ffmpeg 手动转换的文件 index. 详情 »

2018-03-12

查看详情

使用 mux.js 播放 .ts 文件

使用 mux.js 播放 .ts 文件本篇大概是Media Source 系列 - 播放 m3u8 文件的一篇补充。这里大概需要涉及一些视频的编码和解码方面的知识补充。 mux.js 是 videojs 团队出品的一款轻量级前端工具，用于嗅探或者修改 video 的视频的格式： Lightweight utilities for inspecting and manipulating video container formats. 我们播放的视频现在有很多类型，比如 mp4, flv, 3gp 等。但是我们从浏览器角度出发，目前最好的格式还是 mp4, 但是如果我们需要播放 .ts 的切片的文件（m3u8）单元或者 .flv 文件。这个时候，实际我们通过 Video 是无法直接播放的。(.m3u8 文件 Apple 详情 »

2018-02-24

查看详情

Media Source 系列 - 使用 Media Source Extensions 播放视频

终于有时间写关于 Media Source Extensions (后面简称 MSE) 。Media Source Extensions 是在 2016年成为推荐的的 Html5 API。 This specification extends HTMLMediaElement [HTML51] to allow JavaScript to generate media streams for playback. Allowing JavaScript to generate streams facilitates a variety of use cases like adaptive streaming and time shifting live streams. 草案简单明了的指出这个 API 设计的目的: 允许 JavaScript 来生成看到播放的流媒体扩展了 HTMLMediaElement 对象。允许 JavaScript 详情 »