查看详情

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

查看详情

使用 concurrently 运行多个 npm 命令

我们平时可能需要同时在一个 npm scripts 中运行多个 npm 命令。我们第一时间想到了 && 。当然大多数情况我们是可以完成既定的需求，因为其实这些都是在同个进程中，如果我们需要运行的命令需要拿到两个进程的的输出，比如我们同时启动两个 server ，不同端口号。 在日常我们经常会遇到一个用于静态资源的服务器，一个是 业务的 Web 服务器，我们可以使用 webpack 的 middleware 来实现，我们也可以单独拆分。 即分开成两个命令启动。这个适合使用 concurrently 就非常方便了。 比如我们需要启动一个 npm run watch-js 和 npm run watch-less 两个命令。 npm i concurrently -save-dev 安装完成后，我们只需要在我们的 npm scripts 里添加一个合并的命令: "start": "concurrently \"npm run 详情 »

查看详情

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划，比如换份工作环境，比如对职业目标有了新的打算。当然面试这一关不得不过，大概又不可能系统性的复习，这里罗列一些 重点 面试的知识点和文章，方便大家重温一些知识，祝大家心愿达成； HTML CSS 浏览器渲染 浏览器的渲染流程，这一块几乎很多人都会问，如果你是个初级前端，可能这个问题，你大致能够了解道出一些就好，但是如果你是个高级前端，这一块你至少得随时画出这些图，这些有助于你去了解性能优化的点： 这里安利两篇文章，非常详细的讲解了渲染的流程： How browsers work Introduction to Layout in Mozilla HTML HTML 现在相对问的比较少一点，但是如果你需要临时补一下的话，建议看下 Video 和 Canvas 元素。因为这两块确实成为了近两年非常火的话题；在W3C在新发布的 HTML5.2 规范中，推荐了 Dialog 元素，以及支付请求属性 allowpaymentrequest。推荐阅读下： What’s New in HTML 详情 »

查看详情

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 我们还可以了解下 详情 »

记一次 inline-block 在模板渲染引起的异常

最近在做 nunjucks 的 模板替换工作。然后在做 {% for %} 的时候遇到一个问题: {% for item in episodes %} <div {{ item.itemAttr }} class="{{ item.itemClass }}"> <a href={{ item.url }}>{{item.name}}</a> </div> {% endfor %} 其中 div 设置的样式是通过 display: inline-block; 也就是渲染一个普通的列表: 然而，在实际过程中，我们却看到变成 四个一行的，但是看过样式的距离，算出盒子理论每行确实应该容纳五个 div ； 然后查看 Chrome ,并没有发现异常，所以楼主当时心情: 两天纠结之后，重新排查这个问题，用 详情 »

查看详情

Daycaca - a simple image tool

Recently we have released our new image tool daycaca. A pure JS library to handle image via canvas <Canvas> is a magic element which helps you to draw some amazing effects in a web page. And it enables a power to draw images on the canvas. drawImage helps us draw an image on canvas. 详情 »