video 标签定义视频,例如电影片段或其他视频流。目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。
Video 对象是 HTML5 中新增的。Video 对象表示 HTML <video> 元素。
实例:播放视频
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>video</title> </head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持 HTML5 video 标签。 </video> </body> </html>
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 对象方法
| Method | 描述 |
|---|---|
| addTextTrack() | 向视频添加新的文本轨道。 |
| canPlayType() | 检查浏览器是否能够播放指定的视频类型。 |
| load() | 重新加载视频元素。 |
| play() | 开始播放视频。 |
| pause() | 暂停当前播放的视频。 |
实例:创建VIDEO对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video对象</title>
</head>
<body>
<p>点击按钮创建 VIDEO 元素,将播放 .mp4 文件格式的视频。</p>
<p id="myp"></p>
<button onclick="myFunction1()">点我</button>
<p id="demo1"></p>
<script>
function myFunction1(){
var x = document.createElement("VIDEO");
x.setAttribute("width", "100%");
x.setAttribute("controls", "controls");
x.setAttribute("src", "movie.mp4");
let p = document.querySelector('#myp');
p.appendChild(x)
document.querySelector("demo1").innerHTML = "<strong>注意:</strong>IE 和 Safari 浏览器不支持 .ogg 文件格式。这边只是个简单的示例。";
}
</script>
</body>
</html>
浙公网安备 33010602011771号