Web多媒体入门| 青训营笔记

简介: Web多媒体入门| 青训营笔记

图像基本概念

图像分辨率:用于确定组成一幅图像的像素数据,定义了图像再水平和垂直方向所具有的像素个数。


图像深度:图像深度是指存储每个像素所需要的比特数。图像深度决定了图像的每个像素可能的颜色数,或可能的灰度级数。例如,彩色图像每个像素用 R,G,B三个分量表示,每个分量用8位,像素深度为24位,可以表示的颜色数目为2的24次方,既16777216个,一副单色图像存储每个像素需要8bit,则图像的像素深度为8位,最大灰度数目为2的8次方,既256个。


视频概念

分辨率:每一帧图像的分辨率。

帧率:视频单位时间内包含的视频帧的数量。

码率:视频单位时间内传输的数据量,一般用kbps来表示。


I帧、P帧、B帧

  • I帧表示关键帧解码时只需要本帧数据就可以完成
  • P帧码时需要用之前缓存的画面叠加上本帧定义的差别,生成最终画面。
  • B帧是双向差别帧,也就是B帧记录的是本帧与前后帧的差别

aa971531175648f697d50cb258079a54_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


封装格式

存储音视频、图片或者字幕信息的一种容器


web 多媒体历史

  1. falsh
  2. HTML5
  3. Media Source Extensions


多媒体元素和扩展API

<DOCTYPE html> <html> <body> <video src="./video.mp4" muted autoplay controls width=600 height=300></video> <video muted autoplay controls width=600 height=300> <source src="./video.mp4"></source> </video> </body> </html>
复制代码


元素方法

  • play:开始播放音频/视频
  • pause:暂停当前播放的音频/视频
  • load:重新加载音频/视频元素
  • canPlayType:检测浏览器是否能播放指定的音频/视频类型
  • addTextTrack:向音频/视频添加新的文本轨道
  • play方法是异步的,立刻暂停,即立刻调用pause方法会报错


元素属性

  • autoplay:设置或返回是否在加载完成后随即播放
  • control:设置或返回是否显示控件
  • currentTime:设置或返回视频/视频中的当前播放位置(以秒计)
  • duration:返回当前视频/音频的长度
  • src:设置或返回视频/音频的来源
  • volume:设置或返回视频/音频的音量TimeRanges对象
  • buffered:返回表示视频/音频已缓存部分的
  • playbackRate:设置或返回视频/音频的播放速度
  • error:返回表示错误状态的MediaError对象
  • readyState:返回当前的就绪状态


元素事件

  • loadedmetadata:浏览器开始加载视频/音频时触发
  • canplay:浏览器可以开始播放视频/音频时触发
  • play:视频/音频暂停时触发
  • playing:在视频/音频在因缓冲而暂停或停止后已就绪时触发
  • pause:视频/音频暂停时触发
  • timeupdate:用于播放位置改变时触发
  • seeking:用于开始跳跃到视频/音频中的新位置时触发
  • seeked:用于已跳跃到视频/音频中的新位置时触发
  • waiting:视频由于缓冲下一帧而停止时触发
  • ended:播放列表已结束时触发


video和audio标签的缺陷

1.不支持直接播放hls、flv等格式视频

2.视频资源的请求和加载无法通过代码控制

3.分段加载(节约流量)

4.清晰度无缝切换(增强用户体验)

5.精确预加载(增强用户体验)


媒体源扩展MSE(Media Source Extensions)

  • 无插件在Web端播放流媒体
  • 支持播放hls、flv、mp4等格式视频
  • 可实现视频分段加载、清晰度无缝切换、自适应码率、精确预加载等



目录
相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索现代Web前端技术:React框架入门
【10月更文挑战第9天】 探索现代Web前端技术:React框架入门
|
2月前
|
开发框架 网络协议 Java
web搜集-指纹识别 课程笔记
web搜集-指纹识别 课程笔记
|
2月前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
176 0
|
3月前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
39 3
|
2月前
|
Web App开发 Java 测试技术
一、自动化:web自动化。Selenium 入门指南:从安装到实践
一、自动化:web自动化。Selenium 入门指南:从安装到实践
51 0
|
3月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
65 11
|
3月前
|
前端开发
|
3月前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
3月前
|
SQL 安全 数据库
从入门到精通:Python Web安全守护指南,SQL注入、XSS、CSRF全防御!
【9月更文挑战第13天】在开发Python Web应用时,安全性至关重要。本文通过问答形式,详细介绍如何防范SQL注入、XSS及CSRF等常见威胁。通过使用参数化查询、HTML转义和CSRF令牌等技术,确保应用安全。附带示例代码,帮助读者从入门到精通Python Web安全。
93 6
|
3月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。