「这是我参与2022首次更文挑战的第15天,活动详情查看:2022首次更文挑战」
在多媒体元素中,除了图片还有音视频,web 中使用 audio 渲染音频,使用 video 渲染视频。
audio 标签和 video 标签有一些公共属性,video 在基础上多了一些专有属性,我们先来看一下这部分内容:
- autoplay:自动播放,触发自动播放有一定的条件,可以参考文档。
- controls:显示控制器。
- crossorigin:这个属性在其他标签也见过,和跨域加载有关。
- currentTime:当前播放的时间。
- disableRemotePlayback:禁用远程控制。
- duration:音视频时间长度,如果是实时流返回正无穷,此属性只读。
- loop:循环播放。
- muted:静音。
- preload:预加载。
- src:资源地址。
以下属性 video 专有:
- buffered:已经缓存的时间范围。
- controlslist:指定控件集中的控件。
- disablePictureInPicture:禁用画中画。
- width、height:视频宽高。
- playsinline:设置视频 inline 播放。
- played:已经播放的时间范围。
- poster:视频封面图。
上面这些属性通过描述就可以知道是做什么的了,在浏览器中音视频标签的能力不限于这些属性本身,更多时候我们需要提供更上层的定制与抽象,这里需要重点关注的是一系列事件回调。
首先是 canplay 事件,当 canplay 触发时表示资源可以播放,我们需要确保在收到 canplay 之后再调用 play 方法。
在调用 play 后会触发 play 事件,这个事件与 pause 相对,在每次状态转换时会触发,调用 pause 暂停时会触发 pause 事件。
播放中会触发 playing 事件,之后会实时通过 timeupdate 事件来通知进度变化,我们可以在 timeupdate 中捕获实时播放进度。
播放中卡住加载资源时会触发 waiting 事件。
在拖动进度条时,currentTime 发生改变,这时会先后触发 seeking 事件和 seeked 事件。
播放到结束位置触发 ended 事件。
此外还有一些其他的事件和 API 方法,可以查询文档介绍,这些事件和 API 与标签本身一起构成了完整的音视频播放能力。
还有一个 track 标签可以为视频添加字幕,支持设置 vtt 和 ttml 格式的字幕资源,有相关需求可以使用。
以上就是多媒体相关的几个标签的简单介绍,因为浏览器中多媒体比较重要,除了 html 标签外更重要的是一系列强大的 js API,在 html 部分不做过多介绍了。