【青训营】- 走进Web多媒体笔记

简介: 【青训营】- 走进Web多媒体笔记

什么是web多媒体技术?

下面摘录下w3school的官方定义:多媒体是我们可以看到和听到的一切:文本、书籍、图片、音乐、声音、CD、视频、DVD、档案、电影等。多媒体以多种方式存在,在因特网上会发现很多被嵌入网页中的元素。

  • 点播
  • 直播
  • 图片
  • 实时通信
  • 云游戏
  • 视频编辑

音视频基础知识

假设8bit表示一个子像素,清晰度为1280720,频率25fps,时长60s,未压缩视频大小=8bit312807202560=3.9GB,经过H264压缩后视频大小为11MB。

编码格式发展

  • 1999:MPEG-4
  • 2003:H.264
  • 2010:VP8
  • 2013:H.265,VP9
  • 2015:VP10
  • 2018:AV1

浏览器提供的原生多媒体能力

video和audio元素 方法

  • play():开始播放音频/视频
  • paused():暂停当前播放
  • load():重新加载当前元素
  • canPlayType():检测浏览器是否能播放指定的类型
  • addTextTrack():向目标文件添加新的文本轨道
  • autoplay():设置或返回是否在加载完成后随即播放音频
  • controls():设置或返回是否显示控件

video和audio元素的缺陷

  • 不支持直接播放hls、flv等视频格式
  • 视频资源的请求和加载无法通过代码控制

MediaSource

  • 拓展浏览器视频播放能力,支持视频分段加载,替代flash播放器
  • 支持播放mp4、hls、flv等。
  • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等。

Web多媒体技术的发展和突破

  • 加密音视频播放
  • 自适应码率
  • 弹幕:无碰撞、交互弹幕、防挡人像。
  • 网页推流
  • 网页解码
  • 云游戏原理和特点:无需安装、对硬件要求第、低延迟、强兼容性要求。

总结与展望

字节跳动Web多媒体技术发展:

  • 自主研发视频播放器
  • xgplayer开源
  • flv
  • hls
  • webrtc
  • 视频编辑
  • web heif
  • 加密视频
  • h265与防劫持
  • 交互视频
  • 云游戏
相关文章
|
7月前
|
前端开发 JavaScript
JavaScript Web APIs第三天笔记
JavaScript Web APIs第三天笔记
28 0
|
7月前
|
移动开发 JavaScript 前端开发
JavaScript Web APIs第一天笔记
JavaScript Web APIs第一天笔记
24 0
|
10天前
|
XML JSON Java
【Web系列笔记】Restful
本文讨论了RESTful接口设计的原因和原则。传统方式中,http接口常按功能聚合,导致行为不规范,如订单操作有多种请求方式。RESTful设计强调资源的结构清晰、标准统一,通过资源URI、表现层和状态转化来组织接口。它推荐使用GET、POST、PUT和DELETE等HTTP方法对应资源的创建、读取、更新和删除操作。在实践中,应避免URI中包含动词,确保每个URI代表一种资源,并利用HTTP动词表达操作。这样能提高接口的易理解和扩展性。
34 8
|
12天前
|
JSON 缓存 前端开发
【Web系列相关笔记】跨域
CORS是一种W3C标准,用于跨域资源共享,允许浏览器在发送AJAX请求时突破同源策略。它涉及浏览器和服务器两方,其中浏览器自动处理CORS请求,添加Origin头信息。服务器需通过返回特定的Access-Control-Allow-*头信息来允许跨域访问。
21 0
|
28天前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
62 1
|
28天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
23 1
|
28天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
25 0
|
4月前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
110 0
|
4月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
64 0
|
4月前
|
前端开发 JavaScript 应用服务中间件
WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)
WEB前端有必要学会docker吗?0基础-45分钟带你学会(包含视频笔记案例源代码)
31 0