title: HTML5音视频
date: 2019-10-13 09:44:00
tags: HTML5
categories: HTML5
认识 video
-
video 标签定义视频，比如电影等
-
支持的视频格式：mp4、webm、ogv
video 的兼容性
-
Google、Firefox 和 Opera 三种格式全部支持
-
Safari 浏览器不支持 video 的 webm 和 ogv 视频格式
-
IE8 以下均不支持 video 标签
source 标签也可以放入 src，如果播放失败，video 会继续看下一个 source 标签，直到兼容
video 属性
| 属性 | 作用 |
|---|---|
| src | 视频的资源地址 |
| width | 视频宽度 |
| height | 视频高度 |
| controls | 播放控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
| poster | 视频封面，没有播放时显示的图片 |
| muted | 当设置该属性后，它规定视频的音频输出应该被静音 |
注意：autoplay 在Chrome上不会自动播放
video API 事件
| 事件 | 描述 |
|---|---|
| play | 让视频播放/不在暂停时 |
| pause | 让视频暂停/不在播放时 |
| duration | 返回当前视频长度 |
| currentTime | 设置或返回当前视频的总长度，秒为单位 |
| src | 设置/返回当前视频的来源 |
| volume | 设置/返回当前视频的音量 |
| controls | 设置视频是否显示控件 |
| muted | 设置视频是否静音 |
| networkState | 返回视频的当前网络状态 |
| currentSrc | 返回当前音视频的URL，必须是视频加载完成时 |
| ended | 返回音视频的播放是否已结束 |
| loop | 设置或返回视频是否应在结束时重新播放 |
| playbackRate | 设置或返回视频播放的速度 |
| readyState | 属性返回视频的当前就绪状态 |
| timeupdate | 目前的播放位置已更改时 |
| seeked | 当用户已移动/跳跃到视频时的新位置时 |
| seeking | 当用户开始移动/跳跃到视频中的新位置时 |
| volumechange | 当音量已更改时 |
networkState 属性值
| 属性值 | 描述 |
|---|---|
| 0 | NETWORK_EMPTY - 音频/视频尚未初始化 |
| 1 | NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络 |
| 2 | NETWORK_LOADING - 浏览器正在下载数据 |
| 3 | NETWORK_NO_SOURCE - 未找到音频/视频来源 |
网友评论