【第二届青训营-寒假前端场】-Web 多媒体入门2

目录

• Web多媒体的历史
• 基础知识
• 应用场景
• 总结和展望

3.多媒体元素和扩展API

<video>元素

<audio>元素

<audio>和<video>元素方法

<audio>和<video>元素属性

<audio>和<video>元素事件

<audio>和<video>元素缺陷

• 不支持直接播放hls、flv等视频格式
• 视频资源的请求和加载无法通过代码控制
  • 分段加载（节约流量)
  • 清晰度无缝切换
  • 精确预加载

媒体源扩展API (Media SourceExtensions)

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

1. 创建mediaSource实例
2. 创建指向mediaSource的URL
3. 监听sourceopen事件
4. 创建sourceBuffer
5. sourceBuffer中加入数据
6. 监听updateend事件

MSE播放流程

播放器播放流程

mp4和fmp4

• MP4结构

• fmp4结构

4.流媒体协议

HLS 全称是HTTP Live Streaming，是一个由Apple 公司提出的基于 HTTP 的媒体流传输协议，用于实时音视频流的传输。目前HLS协议被广泛的应用于视频点播和直播领域。