查看详情

【译】Web 视频播放前前后后

这应该是目前写的最为完整的关于 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除其他新的标签外,将 < 详情 »

查看详情

使用 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: ', 详情 »

查看详情

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 的内容, 详情 »

查看详情

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. 详情 »

查看详情

使用 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 详情 »

查看详情

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 详情 »