HTML5支持的视频格式：
Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件
支持的浏览器:F、C、O
MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
支持的浏览器: S、C
WebM=带有VP8视频编码+Vorbis音频编码的WebM格式
支持的浏览器: I、F、C、O
基本用法
< video controls="controls" width="800">
<source src="where.ogg" >
<source src="where.mp4" >
您的浏览器暂不支持video标签。播放视频
</ video >
常用的属性
| 属性 |
值 |
描述 |
| autoplay |
autoplay（可以不写） |
自动播放 |
| controls |
controls（可以不写） |
向用户展示播放控件 |
| width/height |
pixels（像素值：不写单位） |
设置播放器宽度/高度 |
| loop |
loop |
播放完是否继续播放该视频，循环播放 |
| src |
url |
视频地址 |
video的常用的API属性
| 属性 |
说明 |
| play |
播放 |
| pause |
暂停 |
| muted |
静音 |
| volume |
音量值 |
| currentTime |
当前播放的时间，单位秒 |
| ended |
返回当前播放是否结束标志 |
例子：基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>多媒体</title>
</head>
<body>
<video controls width="600" autoplay id="v">
<source src="aa.mkv">
<source src="aa.mp4">
您的浏览器不支持video标签播放视频
</video>
<p>
<button id="play" onclick="playa()">播放</button>
<button id="big">变大</button>
<button id="full">全屏</button>
<button id="none">静音</button>
<input type="range" min="0" max="1" step="0.01" onchange="volumea()" id="e"/>
<span id="val">50</span>
</p>
</body>
</html>
播放，放大
var play = document.getElementById('play');
var big = document.getElementById('big');
var full = document.getElementById('full');
var v = document.getElementById('v');
function playa(){
if(v.paused){
v.play()
} else{
v.pause();
}
}
big.onclick = function(){
v.width = 1000;
}
全屏+退出全屏
full.addEventListener('click',function(){
if(v.webkitRequestFullscreen){
v.webkitRequestFullscreen();
}
if(v.mozRequestFullScreen){
v.mozRequestFullScreen();
}
if(v.requestFullscreen){
v.requestFullscreen();
}
v.addEventListener('click',function(){
if(document.webkitCancelFullScreen){
document.webkitCancelFullScreen();
}
if(document.mozCancelFullScreen){
document.mozCancelFullScreen();
}
if(document.cancelFullScreen){
document.cancelFullScreen();
}
})
})
静音
none.addEventListener('click',function(){
if(v.muted){
v.muted = false;
}else{
v.muted = true;
}
})
调节音量
function volumea(){
v.volume = e.value
val.innerHTML = (e.value*100).toFixed()
}