H5 - 视频, H5 - 音频html 基础: H5 新特性 -- 视频 / 音频及视频 / 音频属性, 方法,

<video src="xxx.mp4"></video>
<video>
	<source src="xxx.mp4">
  <source src="xxx.ogg">
</video>

HTML5 新增的 video 标签是一个 300 * 150 的 inline-block, 若指定了 src 视频源, 会自动用第一帧的宽高撑开行内块元素

src: 指定要播放的视频的资源路径
autoplay: 布尔值, 是否自动播放
controls: 布尔值, 是否显示播放控件
loop: 布尔值, 是否循环播放
muted: 布尔值, 是否静音
preload: auto, 字符串, 指定视频预加载策略
- auto: 预加载视频元数据及缓冲一定时长
- metadata: 仅预加载视频元数据( 视频的宽高, 时长, 第一帧内容 )
- none: 不预加载任何数据
poster: 字符串, 在播放视频第一帧之前显示的海报 -> 海报只能在第一次播放之前显示一次
volume: number 类型, 默认值 1, 音量( JS 对象专有 )
duration: number 类型, 总时长( JS 对象专有, 单位 S )
currentTime: number 类型, 当前已播放的时长( JS 对象专有, 单位 S )
paused: 布尔值, 当前是否处于暂停状态( JS 对象专有 )
playbackRate: number 类型, 默认值 1, 回放速率( JS 对象专有 )
- 值大于 1 是快放, 值小于 1 是慢放
ended: 布尔值, 是否播放到结尾

HTML5 提供了一个新的标签 audio 标签, 用于播放音频该标签若没有设置 controls 属性, 则默认 display: none;, 反之则是一个 300 * 30 的 inline-block

语法:

<audio src="xxx.mp3"></audio>
<audio>
	<source src="xxx.mp3">
	<source src="xxx.ogg">
	<source src="xxx.wav">
</audio>

src: 指定要播放的音频的资源路径
autoplay: 布尔值, 是否自动播放
controls: 布尔值, 是否显示播放控件
loop: 布尔值, 是否循环播放
muted: 布尔值, 是否静音
preload: 字符串, 指定音频预加载策略
- 取值:
  - auto: 预加载音频元数据及缓存一段时长
  - metadata: 仅预加载音频元数据 ( 音频的时长, 第一帧内容 )
  - none: 不预加载任何内容
volume: number 类型, 默认为 1, 音量( JS 对象专有 )
duration: number 类型, 总时长( JS 对象专有 )
currentTime: number 类型, 当前已播放时长( JS 对象专有 )
paused: 布尔值, 当前是否处于暂停状态( JS 对象专有 )
playbackRate: number 类型, 默认值 1, 回放速率( JS 对象专有 )
- 值大于 1 是快放, 值小于 1 是慢放
ended: 布尔值, 是否播放到结尾