查看详情

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

查看详情

Mp4 转换为 Hls 或者 Dash 教程

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

查看详情

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

近些年，随着抖音或者快手大火，视频也成了前端比较热衷的领域，无论是最早的直播，还是现在的短视频，我们都离不开 Video ，我们也需要一个足够健壮的 HTML5 播放器来进行视频内容的播放。 Shaka Player 是 谷歌公司对外开源的一款 JavaScript 类库: Shaka Player is an open-source JavaScript library for adaptive media. It plays adaptive media formats (such as DASH and HLS) in a browser, without using plugins or Flash. Instead, Shaka Player uses the open web standards MediaSource Extensions and Encrypted 详情 »

查看详情

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

查看详情

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

之前写过 《如何强制Html5视频进行全量加载》, 大致实现原理是 通过 XHR 进行资源的请求，然后在通过 URL.createObjectURL 创建一个本地播放对象。初次之外，我们现在还可以通过 prefetch 来实现视频的预加载。 Prefetch Prefetching 是 W3C 新草案提出一种资源预加载的的标记。它允许你提前将一些将来的用到的资源或者图片提前进行请求，并将它存在缓存中方便你调用； <link rel="prefetch" href="./image.png" /> <link rel="prefetch" href="./lib.js" /> 它对浏览器有要求，但是不能识别这个标记类型的，浏览器会自行忽略掉； 虽然不同浏览器的实现不一致，但是最新版本的浏览器都还是支持了这个属性，不过它还取决于网络条件，如果网络条件不是怎么好的话，可能浏览器会放弃这个请求； 当然除了 prefetch 我们还可以了解下 详情 »

查看详情

设置 video 的 playbackRate 属性

最近遇到的一个问题，就是我们通常设置视频或者 video 标签的播放速度的时候是通过 playbackRate 来实现的，比如我们需要快速播放或者慢速播放。 其中 playbackRate 的设置区间为[ 0.5 - 4]。 video.playbackRate = 2; 但是我们在使用过程中发现。 playbackRate 表示在播放过程中的调整播放速率，如果我们更换 src 后，效果将不在有用。 defaultPlaybackRate 表示在播放前设置当前 video 的播放速率； 因此如果我们在做播放器的时候我们要做 切换播放速率的问题，可以进行同时切换； video.playbackRate = 2; video.defaultPlaybackRate = 2; 测试demo See the Pen defaultPlaybackRate by Jack Pu (@Jack_Pu) on CodePen. 扩展阅读 详情 »

查看详情

hls.js 源码解读【3】

这一篇主要分析一些辅助类函数的代码实现，扩展一些对 buffer 操作，web worker 等内容的学习。 performance 在 playlist-loader.js 中我们可以看到这行代码 stats.tload = performance.now(); performance 提供了一个高精度的时间访问 API。它能够查看到 Navigation Timing，Resource Timing这些准确的时间结果。 Navigation Timing API能够帮助网站开发者检测真实用户数据（RUM），例如带宽、延迟或主页的整体页面加载时间。 其中 performance.now()可以得到距离页面开始请求到现在相差的毫秒数。 web worker Web worker, Javascript是单线程的，所以如果页面中的Javascript有大量计算的话，很容易阻塞页面的动画或者交互响应。HTML5中的Web Worker就使Javascript的多线程编程成为可能。 在 demux/demuxer.js 中我们可以看到这么一段代码: import work from 'webworkify-webpack'; //... const vendor = navigator.vendor; 详情 »

查看详情

hls.js 源码解读【2】

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

【转】 理解音视频 PTS 和 DTS

原文地址 ： http://blog.csdn.net/x_iya/article/details/52495824 @ N3verL4nd 视频 视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程，就像在一个本子的每一页画上画，然后快速翻动的感觉。 image 但是在实际应用中，并不是每一帧都是完整的画面，因为如果每一帧画面都是完整的图片，那么一个视频的体积就会很大，这样对于网络传输或者视频数据存储来说成本太高，所以通常会对视频流中的一部分画面进行压缩（编码）处理。由于压缩处理的方式不同，视频中的画面帧就分为了不同的类别，其中包括：I 帧、P 帧、B 帧。 I、P、B 帧 I 帧、P 帧、B 帧的区别在于： I 帧（Intra coded frames）：I 帧图像采用帧内编码方式，即只利用了单帧图像内的空间相关性，而没有利用时间相关性。I 帧使用帧内压缩，不使用运动补偿，由于 详情 »