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

foursheep
132 阅读3分钟

这是我参与「第四届青训营」笔记创作活动的的第6天

基础知识

多媒体元素和扩展 API

多媒体元素

<video>元素的使用： image.png

<audio>元素的使用： image.png

<video>和<audio>的方法： image.png

  • play()：开始播放音频/视频
  • pause()：暂停当前播放的音频/视频
  • load()：重新加载音频/视频
  • canPlayType()：检测浏览器是否能播放指定的音频/视频
  • addTextTrack()：向音频/视频添加新的文本轨道

<video>和<audio>的属性： image.png

  • autoplay：设置或返回是否在加载完成后随即播放音频/视频
  • controls：设置或返回音频/视频是否显示控件（如播放/暂停等）
  • currentTime：设置或返回音频/视频中的当前播放位置（以秒计）
  • duration：返回音频/视频的长度（以秒计）
  • src：设置或返回音频/视频元素的当前来源
  • volume：设置或返回音频/视频的音量
  • buffered：返回表示音频/视频已缓冲部分的 TimeRanges 对象
  • playbackRate：设置或返回音频/视频播放的速度
  • error：返回音频/视频错误状态的 MediaError 对象
  • readyState：返回音频/视频当前的就绪状态
  • ...

<video>和<audio>的事件： image.png

  • loadedmetadata：当浏览器已加载音频/视频的元数据时触发
  • canplay：当浏览器可以开始播放音频/视频时触发
  • play：当音频/视频已开始或不再暂停时触发
  • playing：当音频/视频在因缓冲而暂停或停止后已就绪时触发
  • pause：当音频/视频已暂停时触发
  • timeupdate：当目前的播放位置已更改时触发
  • seeking：当用户开始移动/跳跃到音频/视频中的新位置时触发
  • seeked：当用户已移动/跳跃到音频/视频中的新位置时触发
  • waiting：当视频由于需要缓冲下一帧而停止时触发
  • ended：当目前的播放列表已结束时触发
  • ...

<video>和<audio>的缺陷：

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

媒体源扩展 API

Media Source Extensions：

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

使用： image.png

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

MSE

MSE 播放流程：

image.png

播放器播放流程：

image.png

流媒体协议

image.png

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

应用场景

  • 实时通信

提供高质量低延迟的音视频数据通信能力，主要是应用在视频会议，在线教育还有一些互动娱乐的场景里面。

  • 视频编辑

在web端进行音视频的编辑，不需要在自己的编辑软件里操作。

  • 点播

主要分为短视频，中视频，长视频。

  • 直播

在现场通过设备采集现场的音视频数据，把这些数据推送到服务端，服务端进行处理，然后用他的客户端拉取直播流去观看直播。

  • 图片

我们需要对图片的下发，下载的网络链路进行监控，诊断，不同的图片的格式在不同浏览器下是不一样的，比如webp文件在safari浏览器不显示的，然后web多媒体工程师需要对webp文件进行解码，最终显示在safari浏览器中。

  • 云游戏

游戏运行在服务端，降低了客户端硬件要求。

avatar
文章
阅读
粉丝