HTML 标签
标签
<video>标签是HTML5的新标签,其属性如下:
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪后马上播放 |
| controls | controls | 向用户展示控件,比如播放按钮等 |
| height | pixels | 视频播放器的高度 |
| width | pixels | 视频播放器的宽度 |
| loop | loop | 当媒介文件完成播放后再次开始播放 |
| muted | muted | 规定视频的音频输出应该被静音 |
| poster | url | 规定视频下载时显示的图像,或者用户在点击播放按钮前显示的图像 |
| preload | preload | 视频在页面加载时进行加载,并预备播放 |
| src | url | 要播放视频的url |
video 对象
video 对象是HTML5 中的新对象,video对象表示HTML <video> 元素。
- 获取video元素:
var video = document.getElementById("videoId"); - 创建video对象:
var video = docuemnt.createElement("video");
video 对象有如下属性:
| 属性 | 描述 |
|---|---|
| audioTracks | 返回表示可用音频轨道的 AudioTrackList 对象。 |
| autoplay | 设置或返回是否在就绪(加载完成)后随即播放视频。 |
| buffered | 返回表示视频已缓冲部分的 TimeRanges 对象。 |
| controller | 返回表示视频当前媒体控制器的 MediaController 对象。 |
| controls | 设置或返回视频是否应该显示控件(比如播放/暂停等)。 |
| crossOrigin | 设置或返回视频的 CORS 设置。 |
| currentSrc | 返回当前视频的 URL。 |
| currentTime | 设置或返回视频中的当前播放位置(以秒计)。 |
| defaultMuted | 设置或返回视频默认是否静音。 |
| defaultPlaybackRate | 设置或返回视频的默认播放速度。 |
| duration | 返回视频的长度(以秒计)。 |
| ended | 返回视频的播放是否已结束。 |
| error | 返回表示视频错误状态的 MediaError 对象。 |
| height | 设置或返回视频的 height 属性的值。 |
| loop | 设置或返回视频是否应在结束时再次播放。 |
| mediaGroup | 设置或返回视频所属媒介组合的名称。 |
| muted | 设置或返回是否关闭声音。 |
| networkState | 返回视频的当前网络状态。 |
| paused | 设置或返回视频是否暂停。 |
| playbackRate | 设置或返回视频播放的速度。 |
| played | 返回表示视频已播放部分的 TimeRanges 对象。 |
| poster | 设置或返回视频的 poster 属性的值。 |
| preload | 设置或返回视频的 preload 属性的值。 |
| readyState | 返回视频当前的就绪状态。 |
| seekable | 返回表示视频可寻址部分的 TimeRanges 对象。 |
| seeking | 返回用户当前是否正在视频中进行查找。 |
| src | 设置或返回视频的 src 属性的值。 |
| startDate | 返回表示当前时间偏移的 Date 对象。 |
| textTracks | 返回表示可用文本轨道的 TextTrackList 对象。 |
| videoTracks | 返回表示可用视频轨道的 VideoTrackList 对象。 |
| volume | 设置或返回视频的音量。 |
| width | 设置或返回视频的 width 属性的值。 |
video 坑
在手机端,各个浏览器厂商对 video 标签有不同的实现或商业调整。比如,QQ浏览器播放视频暂停时有广告,UC浏览器播放结束后有相关推荐。形成各种各样的坑。 对于QQ浏览器默认全屏的问题,可以指定video的宽高来解决。对于播放结束后有相关推荐的,可以在播放结束后删除video标签。