【青训营】- 走进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与防劫持
  • 交互视频
  • 云游戏
相关文章
|
前端开发 JavaScript
JavaScript Web APIs第三天笔记
JavaScript Web APIs第三天笔记
54 0
|
移动开发 JavaScript 前端开发
JavaScript Web APIs第一天笔记
JavaScript Web APIs第一天笔记
45 0
|
2月前
|
开发框架 网络协议 Java
web搜集-指纹识别 课程笔记
web搜集-指纹识别 课程笔记
|
4月前
|
机器学习/深度学习 人工智能 前端开发
AI计算机视觉笔记三:WEB端部署YOLOv5
本文档介绍了如何将YOLOv5目标检测模型部署到Web端的方法,包括基于Flask和Streamlit两种实现方案。首先创建Python虚拟环境并安装必要的依赖库。接着详细展示了Flask方案下的前端HTML页面与后端Python逻辑代码,该方案利用Flask框架搭建服务器,处理实时视频流,并显示检测结果。随后介绍了Streamlit方案,该方案更简洁直观,适合快速开发交互式的机器学习应用。通过`streamlit run`命令即可启动应用,支持图像、视频及实时摄像头的目标检测演示。两种部署方式各有优势,Flask灵活性高,适用于复杂项目;而Streamlit则易于上手,便于快速原型设计。
|
6月前
|
前端开发 JavaScript Java
计算机java项目|基于web的多媒体素材管理系统
计算机java项目|基于web的多媒体素材管理系统
|
6月前
|
XML 数据格式 Python
Python基础教程(第3版)中文版 第15章 python和web(笔记)
Python基础教程(第3版)中文版 第15章 python和web(笔记)
|
7月前
|
XML JSON Java
【Web系列笔记】Restful
本文讨论了RESTful接口设计的原因和原则。传统方式中,http接口常按功能聚合,导致行为不规范,如订单操作有多种请求方式。RESTful设计强调资源的结构清晰、标准统一,通过资源URI、表现层和状态转化来组织接口。它推荐使用GET、POST、PUT和DELETE等HTTP方法对应资源的创建、读取、更新和删除操作。在实践中,应避免URI中包含动词,确保每个URI代表一种资源,并利用HTTP动词表达操作。这样能提高接口的易理解和扩展性。
71 8
|
7月前
|
JSON 缓存 前端开发
【Web系列相关笔记】跨域
CORS是一种W3C标准,用于跨域资源共享,允许浏览器在发送AJAX请求时突破同源策略。它涉及浏览器和服务器两方,其中浏览器自动处理CORS请求,添加Origin头信息。服务器需通过返回特定的Access-Control-Allow-*头信息来允许跨域访问。
60 1
|
7月前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
114 1
|
7月前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
67 1