HTML 标签

标签

<video>标签是HTML5的新标签,其属性如下:

属性描述
autoplayautoplay视频就绪后马上播放
controlscontrols向用户展示控件,比如播放按钮等
heightpixels视频播放器的高度
widthpixels视频播放器的宽度
looploop当媒介文件完成播放后再次开始播放
mutedmuted规定视频的音频输出应该被静音
posterurl规定视频下载时显示的图像,或者用户在点击播放按钮前显示的图像
preloadpreload视频在页面加载时进行加载,并预备播放
srcurl要播放视频的url

video 对象

video 对象是HTML5 中的新对象,video对象表示HTML <video> 元素。

  1. 获取video元素: var video = document.getElementById("videoId");
  2. 创建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标签。

navigate_before navigate_next