Web视频开发技术总结，视频开发常见问题分析，如何解决前端视频开发的常见问题。
58 篇文章使用 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 文件的操作； 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 详情 »
近些年，随着抖音或者快手大火，视频也成了前端比较热衷的领域，无论是最早的直播，还是现在的短视频，我们都离不开 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 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 详情 »
之前写过 《如何强制Html5视频进行全量加载》, 大致实现原理是 通过 XHR 进行资源的请求，然后在通过 URL.createObjectURL 创建一个本地播放对象。初次之外，我们现在还可以通过 prefetch 来实现视频的预加载。 Prefetch Prefetching 是 W3C 新草案提出一种资源预加载的的标记。它允许你提前将一些将来的用到的资源或者图片提前进行请求，并将它存在缓存中方便你调用； <link rel="prefetch" href="./image.png" /> <link rel="prefetch" href="./lib.js" /> 它对浏览器有要求，但是不能识别这个标记类型的，浏览器会自行忽略掉； 虽然不同浏览器的实现不一致，但是最新版本的浏览器都还是支持了这个属性，不过它还取决于网络条件，如果网络条件不是怎么好的话，可能浏览器会放弃这个请求； 当然除了 prefetch 我们还可以了解下 详情 »
最近遇到的一个问题，就是我们通常设置视频或者 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. 扩展阅读 详情 »
这一篇主要分析一些辅助类函数的代码实现，扩展一些对 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 的基本目录架构和代码执行流程，这一篇将主要分析 主链路实现代码的分析。 源码分析会点出核心的调用流程，其中一些不常用的方法或者比较容易理解的不做详细的注释。 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/ 详情 »
原文地址 ： 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 帧使用帧内压缩，不使用运动补偿，由于 详情 »
hls.js 是一款基于 Media Source Extensions 开发的，用于实现 HTTP Live Streaming 开源JavaScript类库。它可以实现将MPEG-2 和 AAC/MP3码流变成自制的 MP4的分片。并且可以直接绑定在Video 上，实现播放。 文章主要是通过解读源码，希望读者可以了解实现基本的前端 HLS 的主要流程，同事也可以扩展读者对 Media Source Extensions 和 video api 以及 视频编解码的相关知识有更进一部的了解。 第一篇文章可能会从整体方面，让大家理解一下调用的 整体流程，让大家对真个项目的基本代码架构有个基础的认识。 目录指南 只对和项目相关的文件进行说明 dist // 打包后的文件目录， src + cotroler - abr-controller.js // 用于分片筛选 - audio-stream-controller.js - audio-track-controller.js - buffer-controler.js 详情 »
