聊聊新的 Media API Media Capabilities

关于我们探测是否浏览器能够支持某种视频的播放,我们经常用的 MediaSource.isTypeSupported() 或者 HTMLMediaElement.canPlayType() 来判断,详情可以参看 《探测浏览器对 video 和 audio 的兼容性》 。不过今天介绍一个新的 API , Chrome 在版本 64 开始支持的 navigator.mediaCapabilities;它解决的问题是我们支持了这些格式,但是在当前设备那种格式表现最好呢? Media Capabilities 详情 »

AV1 VS HEVC VS VP9

之前写了关于 Web 对 H.265/HEVC 的播放支持,如果有兴趣的童鞋可以前往 《Web 播放 H.265视频》 了解,今天主要介绍 AV1(AOMedia Video 1) 和 H.265 的对比。 H.265/HEVC H. 详情 »

Web 播放 H.265视频

本文主要从H.265 编码格式出发,介绍 H265 使用情况,以及对比 H.264的优势,随后分析如何在前端完成 H265 视频格式的播放。 H.265, HEVC 是当前非常火的视频压缩方式,相对于大家熟知的 H.264 ,平均可以带来接近于 50% 的宽度节省。这对于我们做视频的开发者而言,无疑我们可以在同等流量下拿到更多的 Buffer,无论是直播还是视频播放都是非常有收益的事情。 详情 »

React-360 源码阅读【6】- Video 分析

前面我先看了 React-360 源码阅读【5】- 核心 Compositor 里的内容,其中里面涉及了 video 作为背景的内容,今天分析一下 video 目录里面的内容;实际上我们如果要设置全景视频,可以直接通过调用; // Creating a Video Player const player = r360.compositor.createVideoPlayer('myplayer') 详情 »

使用 JS 直接截取 视频片段 生成 gif 动画

最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频,所以就干脆直接再进一步,以后直接通过一个库快速生成 gif 。 直接放参考 DEMO 效果 实现原理 其实相对而言,也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。 详情 »

使用 mediaSession 实现媒体播放的通知栏控制

Chrome 在其移动版本的 57 开始后 支持了一个的 新的 API mediasession。(目前桌面版本浏览器不支持) 它能够做什么呢? 你可以通过提供自定义的 metadata 信息来设置通知栏的效果。 我们以音频为例的话,差不多是你可以在播放音乐的时候你可以设置锁屏或者通知栏上的效果: 1: 默认播放 2:通知栏 3: 锁屏 我们看小具体的代码: if ('mediaSession' in navigator) 详情 »

Chrome 新的自动播放策略

最近看 来自 Chrome 团队在 IO 2018上的 分享 《Build awesome media experiences on the web》 。大概主要是说关于 音视频在 Chrome 上的更新。其中业务团队需要及时关注新的 自动播放策略,虽然在去年9月份 Chrome 团队就更新了博客 《Autoplay Policy Changes》 详情 »

FFmpeg 比较实用的命令

ffmpeg 是一款非常强大的音视频处理工具,它可以完成对视频的编码,解码以及整合等等功能。它有着强大的命令行操作选项,下面罗列一下非常使用的命令,方便大家处理视频(不依赖Adobe Premiere 等比较复杂软件)。 截取分帧的图片 ffmpeg -i video.mp4 thumb%04d.jpg -hide_banner 获取某一帧的图片 ffmpeg -i video.mp4 -ss 详情 »

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