无 Flash 时代,让直播拥抱 H5

直播是脱离于文字、图片来说,另外一种社交的方式。各大平台也在深耕这一领域,淘宝直播,花椒,映客,Now 直播,企鹅电竞。本人就职于腾讯 Now 直播前端开发,感觉直播能够尝试的领域真的太多太多,但是,Web 在这块一直是一个痛点。由于没有现成操作流的接口,只能简简单单的通过添加 video.src 尴尬的播放几段回放...... 这样造成的后果就是,在 Web 上,我们根本体会不到实时流畅的观看体验。

而且,根据 8 月份腾讯财报内容,直播贡献的收入增长的飞快。现在,我们也想让 Web 体会一把能够实时观看直播的方式,这应该怎么做呢?W3C 提出了 MSE 的标准,表义上来说就是,让前端能够操作视频流。HLS.js,FLV.js 本身也是基于 MSE 开发的。MSE 的出现,不仅能让 Web 接上直播,而且还可以根据协议自己控制相关的延迟率。

那直播,又和我们今天的主题 MSE/video 有啥关系呢?

在没有 MSE 的时候,直播形式要么在 flash 中播放,要么在客户端播放,要么利用 HLS 来手机端播放。不仅 HTML5 原生播放器的场景几乎可以说是没有,而且 H5 播放的延时性还非常高。最多我们也只能控制一下 视频播放 的表层工作,比如,暂停,播放,快进。例如:

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">播放声音</button>
  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button>
</div>

这样,感觉和写 HTML 没啥区别,我们也并不能对流做一下神奇的操作,比如,跳帧,音视频同步,拿到 I/B/P 帧生成视频图像之类的。这其实只是给了我们另外一个界面的 UI API 而已,并不能让 所有能用代码写的程序,都可以用 JavaScript 来写 这一非常宏伟的目标。

后面,各台平台支持了 MSE,前端开发者从此也可以进行音视频的相关开发。因为,MSE 的主要工作是可以创建 media stream,并且喂给 video/audio 进行播放。从此,前端可以和写 C++ Java 的人有了共同的话题--二进制流的操作。 本篇文章的主要目录如下:

  • MSE 简介
  • MediaSource
    • video 切换
    • audio 切换
    • addSourceBuffer
    • removeSourceBuffer
    • sourceBuffers
    • activeSourceBuffers
    • 基本 API
    • isTypeSupported
    • SourceBuffer 的处理
    • 状态切换
    • track 的切换
    • MS duration 修正机制
  • SourceBuffer
    • Initialization segments
    • Media Segment
    • 播放模式
    • 如何界定 track
    • SB buffer 的管理
    • 控制播放片段
    • SB 内存释放
  • HTMLMediaElement 播放设定
    • audioTracks/videoTracks
    • video 播放事件的迷
    • video 为啥不能自动播放?
    • 用 JS 来 seek video
    • 试一试控制条
    • media 与 MSE 的联系
  • 业务实践
    • MSE 管理环节

如果有兴趣的同学,可以前往 gitchat ,参与我的 chat 分享。

原文发布于微信公众号 - 前端小吉米(villainThr)

原文发表时间:2017-09-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

企业应用中使用Silverlight 3

Q&A: Microsoft's Scott Guthrie Breaks Down Silverlight 3 for Enterprise Develope...

1846
来自专栏Golang语言社区

11个基础的HTML5动画工具

如今,在Web开发中最为流行的语言就是HTML5了,它帮助开发者将多样化的内容展现给用户。在过去两三年中,我们共同看到了HTML5的发展,它逐渐在网络的世界中积...

3837
来自专栏葡萄城控件技术团队

响应式设计(Response Web Design)浅谈

响应式Web设计,这个话题可能是当下Web设计领域里讨论和应用比较多的话题了,为什么要响应式Web设计?什么是响应式Web设计? Web发展迅速,各种应用和服务...

1869
来自专栏极乐技术社区

『教程』微信小程序canvas辑合(教程+Demo+跳坑)

社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。 但是极乐叔发现在小程序开发学...

9309
来自专栏前端小叙

select自定义小三角样式

这段代码是网上大部分的解决办法,在这里总结一下: 让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字...

2766
来自专栏前端小吉米

无 Flash 时代,让直播拥抱 H5(一)

1495
来自专栏理论坞

设计工具 ps、Ai和 Sketch 对比评测:各有所长

新入门的设计师肯定很好奇,Photoshop、Illustrator 和 Sketch 三款软件到底哪个好?我到底从哪里开始学?今天我们这里将给你一个好的说法。

1084
来自专栏王颖琦的专栏

腾讯视频云剪辑技术实现

不断对技术优化和创新是维持用户粘性和持续增加用户数量的重要环节,也是公司节省成本和开支有效方法,围绕用户体验和成本优化,腾讯视频推出了云剪辑系统。

1.6K0
来自专栏腾讯社交用户体验设计

浅议内滚动布局 - 腾讯ISUX

1003
来自专栏PHP在线

你知道了吗?2015年网页设计的9大趋势

其实在此之前已经有很多小伙伴翻译或总结过类似文章来分析优秀网页设计的趋势,不过我还是希望我总结的东西能更宏观一点并为大家带来一些新的东西。 稍后看官们可能会觉得...

3929

扫码关注云+社区