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

上一篇写了 Media Source 系列 - 播放 m3u8 文件 , 写了使用 MSE 来播放一个包含分片内容的资源。同样除此之外,我们可以借助 MSE 来进行更加 细粒 的缓存控制调度。 HTTP Range HTTP Range ,HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件, 详情 »

Media Source 系列 - 播放 m3u8 文件

前一篇文章 《使用 Media Source Extensions 播放视频》 我们大致写了 Media Source Extensions, MSE 的基本介绍和使用。这篇文章是在之前基础上完成的,文章将实现如何借助 MSE 来播放流文件比如 m3u8 或者 dash。 自己之前在知乎上回答过这个问题 有支持M3U8格式的HTML5播放器吗? 有简单说一些基本实现思路,但是没有贴实现的代码,因为已经有很多前端开源的播放器了比如 hls.js, 详情 »

使用 mux.js 播放 .ts 文件

使用 mux.js 播放 .ts 文件 本篇大概是Media Source 系列 - 播放 m3u8 文件 的一篇补充。这里大概需要涉及一些视频的编码和解码方面的知识补充。 mux.js 是 videojs 团队出品的一款轻量级前端工具,用于嗅探或者修改 video 的视频的格式: Lightweight utilities for 详情 »

Mp4 转换为 Hls 或者 Dash 教程

最近接触流媒体的一些东西,大概这里安利两个命令行工具用于对 mp4 文件的操作; Ffmpeg ffmpeg 是一款非常出名的命令行工具,你可以用它进行格式转换(初中生的我只知道格式工厂),甚至对流进行编码; $ ffmpeg -i input.mp4 output.avi 除此之外你也可以使用它来进行媒体资源基本信息的查看,比如: $ ffmpeg -i videoplayback.mp4 你可以看到命令行的输出: 你可以看到视频的流的一些信息,比如分辨率,码率, 详情 »

谷歌开源 H5 流媒体播放器 shaka-player 初探

近些年,随着抖音或者快手大火,视频也成了前端比较热衷的领域,无论是最早的直播,还是现在的短视频,我们都离不开 Video ,我们也需要一个足够健壮的 HTML5 播放器来进行视频内容的播放。 Shaka Player 是 谷歌公司对外开源的一款 JavaScript 类库: Shaka Player is an open-source JavaScript library for adaptive media. 详情 »

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

使用 prefetch 全量加载 音频或者视频

之前写过 《如何强制Html5视频进行全量加载》, 大致实现原理是 通过 XHR 进行资源的请求,然后在通过 URL.createObjectURL 创建一个本地播放对象。初次之外,我们现在还可以通过 prefetch 来实现视频的预加载。 Prefetch Prefetching 是 W3C 新草案提出一种资源预加载的的标记。它允许你提前将一些将来的用到的资源或者图片提前进行请求,并将它存在缓存中方便你调用; <link rel="prefetch" href= 详情 »

设置 video 的 playbackRate 属性

最近遇到的一个问题,就是我们通常设置视频或者 video 标签的播放速度的时候是通过 playbackRate 来实现的,比如我们需要快速播放或者慢速播放。 其中 playbackRate 的设置区间为[ 0.5 - 4]。 video.playbackRate = 2; 但是我们在使用过程中发现。 playbackRate 表示在播放过程中的调整播放速率,如果我们更换 src 后,效果将不在有用。 defaultPlaybackRate 表示在播放前设置当前 详情 »

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