hls.js 源码解读【3】

这一篇主要分析一些辅助类函数的代码实现,扩展一些对 buffer 操作,web worker 等内容的学习。 performance 在 playlist-loader.js 中我们可以看到这行代码 stats.tload = performance.now(); performance 提供了一个高精度的时间访问 API。它能够查看到 Navigation Timing,Resource Timing这些准确的时间结果。 Navigation Timing 详情 »

hls.js 源码解读【2】

上一篇 我们分析了 hls.js 的基本目录架构和代码执行流程,这一篇将主要分析 主链路实现代码的分析。 源码分析会点出核心的调用流程,其中一些不常用的方法或者比较容易理解的不做详细的注释。 hls.js 是模块打包的入口 import URLToolkit from 'url-toolkit'; import Event from './events'; import {ErrorTypes, ErrorDetails} from '. 详情 »

【转】 理解音视频 PTS 和 DTS

原文地址 : http://blog.csdn.net/x_iya/article/details/52495824 @ N3verL4nd 视频 视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程,就像在一个本子的每一页画上画,然后快速翻动的感觉。 image 但是在实际应用中,并不是每一帧都是完整的画面,因为如果每一帧画面都是完整的图片,那么一个视频的体积就会很大,这样对于网络传输或者视频数据存储来说成本太高,所以通常会对视频流中的一部分画面进行压缩(编码)处理。由于压缩处理的方式不同,视频中的画面帧就分为了不同的类别, 详情 »

hls.js 源码解读【1】

hls.js 是一款基于 Media Source Extensions 开发的,用于实现 HTTP Live Streaming 开源JavaScript类库。它可以实现将MPEG-2 和 AAC/MP3码流变成自制的 MP4的分片。并且可以直接绑定在Video 上,实现播放。 文章主要是通过解读源码,希望读者可以了解实现基本的前端 HLS 的主要流程,同事也可以扩展读者对 Media 详情 »

解决新版本 Chrome 提示 DOMException: The play() request was interrupted

解决新版本 Chrome 提示 DOMException: The play() request was interrupted 解决新版本 Chrome 提示 DOMException: The play() request was interrupted 大概在一些新版本的浏览器中,我们是用 audio 或者 video 进行媒体资源播放的时候,可能会在控制台看到这个输出: Uncaught 详情 »

IE vs Chrome vs Safari video 的预加载表现分析

我们知道在 video 的标签中支持 preload的属性, 它表示可以 用于定义视频对于媒体资源的预加载从而达到更好的播放体验。它可以设置下面属性值: auto 表示整个视频都会进行下载,即使用户并不打算播放它。 metadata 只请求视频信息的 metadata 数据,比如长度。 none 不停止视频资源预加载。 测试表现 Chrome *版本: 61 * 我们测试Chrome设置为 auto 的时候加载数据大约为 (3.6M 详情 »

MacOS High Sierra Safari 11限制了 video 自动播放

前些天 Apple 正式向用户推送了他们的新一代 Mac OS MacOS High Sierra 。这次带来了新的 Safari 浏览器,然而一个不好的消息,是 safari 重新制定了新的限播策略。点击这里 了解上个版本的播放限制策略调整。 现在网页用包含 video 或者 audio 的标签,如果涉及了 autoplay 属性,浏览器现在不再进行自动播放, 详情 »

【译】iOS 上 video 标签的 的一些限制

原文地址: https://webkit.org/blog/6784/new-video-policies-for-ios/ @jernoble 如果接触过 ios 上的开发,在iphoneOS 3 的时候 safari 只允许用户与 video 进行交互的时候才会触发数据的加载。但是为了将更多的媒体播放控制权重新回到网页开发者,iOS 8放宽了这一限制:Safari开始支持 preload="metadata" 属性,允许& 详情 »

探测浏览器对 video 和 audio 的兼容性

Detecting browser compatibility for HTML5 video and audio 原文链接 https://www.nomensa.com/blog/2011/detecting-browser-compatibility-html5-video-and-audio 近期接触播放器项目,所以对 video 除了基本的 api 的了解,还需要做好对应的兼容性。Chrome 最早在 11年开始了对于 详情 »

用户点击 ESC 退出全屏事件绑定

最近做视频相关,在全屏的时候之前 自以为捕获 esc 就可以了。也就是: document.addEventListener('keyup', (e) => { if (e.which === 27) { // your code } }) 然后实际上是没有什么效果,一查资料发现: When fullscreen mode is successfully engaged, the 详情 »