·首先带大家熟悉一下video标签的属性方法，根据属性方法做一个小demo，
-
HTML5支持的视频格式：Ogg- 带有
Theora视频编码+Ogg文件 - 支持的浏览器:
F、O
- 带有
MEPG4- 带有
H.264视频编码+MPEG4文件 - 支持的浏览器:
S、WebM- 带有
VP8视频编码+WebM格式 - 支持的浏览器:
I、C、想要video能自动填充慢父div的大小，只要给style="width= 100%; height=100%; object-fit: fill"即可
video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video> - 带有
给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频<video controls = “controls”> <source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4” <source src = “2.ogg” type=”video/ogg” /> //ogg格式 <source src=”3.webm” type=”video/webm” /> //webm格式 </video>controls 是否显示播放控件
autoplay 是否打开浏览器后自动播放
width 设置播放器的宽度
height 设置播放器的高度
loop 设置视频是否循环播放
preload 设置是否等加载完再播放
src url 设置要播放视频的url地址
poster imgurl 设置播放器初始默认显示图片canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
play() 开始播放音频/视频。
pause() 暂停当前播放的音频/视频。playbackRate 设置或返回音频/视频播放的速度。
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）。
duration 返回当前音频/视频的长度（以秒计）。
loadedmetadata：当指定的音频/视频的元数据已加载时，会发生 loadedmetadata事件。
timeupdate: 时间改变时触发muted 设置或返回音频/视频是否静音。
volume 设置或返回音频/视频的音量- 带有
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 视频地址：<input type="text" id="videoUrl" value="http://115.231.144.52/12/v/w/m/y/vwmypxnxothnduooudlozlddkekrrs/hc.yinyuetai.com/E771014D8879E8AA0ED2CBC807F1C2CE.flv?sc=f1cc344f8e1ff11a"/> <button onclick="getVideo()">load</button><br /> <video id="video" width="500" height="400" controls autoplay loop preload poster="img/1.jpg"></video><br /> <button onclick="play()">播放/暂停</button> <button id="mute">静音</button> <button id="volUp">++</button> <button id="volDown">--</button> <button id="slower">减慢速率</button> <button id="normal">恢复速率</button> <button id="faster">加快速率</button> <br /> <button id="reset" >复位</button> <button id="bwd" > <<倒退 </button> <button id="fwd" >快进>></button> <br /> 视频长度: <span id="vLength"></span> <br /> 当前时间: <span id="curTime" ></span><br /> 持续时间: <span id="vRemaining" ></span> </body> <script type="text/javascript"> /*加载视频*/ var video=document.getElementById("video"); function getVideo(){ var videoUrl=document.getElementById("videoUrl").value; if(videoUrl!=""){ video.src=videoUrl; video.load(); } } /*播放*/ if(video.canPlayType){ function play(){ if(video.paused){ video.play(); }else{ video.pause(); } } } /*静音*/ document.getElementById("mute").addEventListener("click",function(){ if(video.muted){ video.muted=false; }else{ video.muted=true; } }); /*音量*/ function setVol(value){ var vol=video.volume; vol+=value; if(vol>=0&&vol<=1){ video.volume=vol; }else{ video.volume=(vol<0)?0:1; } } document.getElementById("volUp").addEventListener("click",function(){ setVol(.1); }); document.getElementById("volDown").addEventListener("click",function(){ setVol(-.1); }); /*减小速率加大速率*/ document.getElementById("slower").addEventListener("click",function(){ video.playbackRate-=.25; }); document.getElementById("faster").addEventListener("click",function(){ video.playbackRate+=.25; }); document.getElementById("normal").addEventListener("click",function(){ video.playbackRate=1; }); /*快进倒退复位*/ function setTime(a){ if(a==0){ video.currentTime=a; }else{ video.currentTime+=a; } } document.getElementById("reset").addEventListener("click",function(){ setTime(0); }); document.getElementById("fwd").addEventListener("click",function(){ setTime(10); }); document.getElementById("bwd").addEventListener("click",function(){ setTime(-10); }); /*视频长度*/ video.addEventListener("loadedmetadata", function () { vLength = video.duration.toFixed(1); document.getElementById("vLength").textContent = vLength; }); /*当前时间和持续时间*/ video.addEventListener("timeupdate", function () { var currentTime= video.currentTime; document.getElementById("curTime").textContent = currentTime.toFixed(1); document.getElementById("vRemaining").textContent = (vLength - currentTime).toFixed(1); }); </script> </html>