6.多媒体及嵌入-灵析社区
懒人学前端一、如何插入音频？
IE 浏览器，早期用非标准属性 <bgsound> 设置网页背景音乐，只支持 .wav .au 和 .mid
Flash 支持.mp3 .flv .f4v rtmp 和 m3u8，用于 Web 播放音视频
HTML5 使用<audio> 元素用于在文档中嵌入音频内容
- 可以使用内嵌
<source>提供不同播放源
设置 type属性，避免消耗大量时间和资源让浏览器尝试加载
- 浏览器会使用第一个支持的格式
二、如何插入视频 ？
Flash 支持.mp3 .flv .f4v rtmp 和 m3u8，用于 Web 播放音视频
HTML5 使用 <video> 元素用于在文档中嵌入视频内容
- 可以使用内嵌
<source>提供不同播放源
设置 type属性，避免消耗大量时间和资源让浏览器尝试加载
- 浏览器会使用第一个支持的格式
<video>标签支持width / height属性<video>标签支持poster属性设置缩略图
三、有哪些标签可以嵌入外部内容 ？
可以嵌入外部内容的标签包括：
<link>外部 CSS，Favicon.ico<script>外部 JavaScript<img>外部图像<audio><bgsound>外部音频<video>外部视频<iframe>嵌入外部网页<embed>嵌入插件<object>嵌入插件
可以嵌入外部内容的标签，通常被用来解决跨域问题
四、兼容性较好的视频、音频格式分别是 ？
- 视频
MPEG-4 即 MP4容器格式
MP4 支持流媒体
MP4支持 MPEG-2、MPEG-4、HEVC、H.265、H.264 和 H.263 视频编码
MP4 支持 AAC、MPEG-1、Layers Ⅰ、Ⅱ、Ⅲ 和 AC-3 等音频编码
所有现代浏览器、移动端浏览器和 Internet Explorer 都支持
WebM
WebM 支持流媒体
WebM 支持 VP8 和 VP9 视频编码
WebM 支持开源的 Vorbis 和 Opus 音频
所有现代浏览器都支持
- 音频
MPEG Audio Layer 3 即 MP3
MP3 利用 MPEG Audio Layer 3 技术，将音乐以 1:10 至 1:12 压缩率压缩成小文件
绝大多数浏览器，包括 IE9 +，除老版本的 Firefox、Opera 外都支持
五、如何使媒体文件支持不同平台，不同设备的浏览器 ？
使用 <source> 标签
- 用于为图片
<picture>音频<audio>和视频<video>指定多个媒体资源 - 设置
type属性声明资源的 MIME 类型，增加资源的备选类型
图像，优先现代图片格式，如 webp 或 avif 使用 jpg 或 png托底
视频，优先 webm 使用 mp4 托底
音频，优先 mp3 使用 ogg 兼容老版本 Firefox，使用 wav 兼容老版本 Opera
- 使用 替换内容，如图片的
<img>标签，<audio>和<video>嵌入 Flash 兼容老浏览器
六、如何为视频插入字幕 ？
使用 <track> 标签
- 设置
src属性，声明视频字幕的地址
引用 WebVTT 格式 或者 TTML 时序文本标记语言格式的字幕地址
- 设置
kind属性为subtitles。subtitles是默认值，这步可省略 - 设置
srclang属性，从合法 BCP 47 语言标签中选择一种声明字幕语言 - 设置
label属性，用户可读可选择语种
七、如何为视频设置缩略图 ？
设置 <video> 的 poster 属性
- 提供视频的缩略图地址
- 缩略图将在视频播放或跳帧前显示
- 未指定缩略图，在第一帧可用前，什么都不显示
八、为什么设置 `autoplay` 的视频无法自动播放 ？
- 移动端普遍按流量付费，所以移动端浏览器在用户首次打开视频时
忽略 autoplay的自动播放属性
弹出确认框，询问用户是否使用流量播放视频
- 自动播放策略限制
始终允许静音视频自动播放
以下情况允许自动播放声音
用户与域进行了交互（单击、点击等）
桌面上，用户的媒体参与指数阈值已被超过，即用户之前曾播放过有声视频
用户已将站点添加到其移动设备主屏幕或在桌面设备上安装了 PWA
上层框架可以将自动播放权限委托给它们的 iframe，允许自动播放声音
- 策略影响版本
音视频元素从 Chrome 66 起受自动播放策略限制
网络音频从 Chrome 71 起受自动播放策略限制
如果 AudioContext 在文档接收到用户手势之前创建，AudioContext.state 为 suspended，需在用户手势之后调用 resume() 开始播放
用户主动点击节点，调用 start() 开始播放
阅读量：2072
点赞量：0
收藏量:0