音频格式:mp3, ogg, wav.
视频格式:mp4, ogv, webm.
历史:早期使用Flash, html5 后使用video/ audio.
video/audio 标签及其常用属性
- controls
- autoplay
- loop
- source
- preload
- poster(video)【视频播放前显示的封面】
以视频为例:
<video src="media/badfox.mp4" width="640px" autoplay="autoplay" controls="controls" loop="loop">
您的浏览器不支持video 标签
</video>
<video width="640px" autoplay="autoplay" controls="controls" loop="loop" poster="xxx.jpg" preload="preload">
<!-- 只会显示最先能显示出来的视频资源 -->
<!-- 以下三种格式,基本可以兼容所有浏览器 -->
<source src="media/xxx.mp4" type="video/mp4">
<source src="media/xxx.ogv" type="video/ogv">
<source src="media/xxx.webm" type="video/webm">
</video>
其中,preload 属性有三个值:auto meta none. 分别表示,加载数据与元数据,只加载元数据,不加载数据不加载元数据。
video/audio API 事件
- loadedmetadata(加载完元数据触发的事件) - seeking(拖动视频进度条,需对视频进行重定位)
- progress(请求视频数据) - waiting(网络上视频,下一帧图像需要缓冲时)
- canplay(可以播放) - volumechange(声音变化)
- canplaythrough(可以一直播放到结束) - ended(视频结束)
- timeupdate(时间进度在更新,在播放时会一直触发) - pause(视频暂停)
<video src="media/badfox.mp4" id="myvideo" width="640px" autoplay="autoplay" controls="controls">
浏览器不支持视频(video)
</video>
<script type="text/javascript">
var v = document.getElementById("myvideo");
// 加载元数据
v.onloadedmetadata = function(){
console.log("loadedmetadata")
}
</script>
video/audio API 属性
- currentSrc -ended
- duration - muted
- currentTime - playbackRate
- volume - buffered
- paused
<script type="text/javascript">
var v = document.getElementById("myvideo");
var startbtn = document.getElementById("start");
var pausebtn = document.getElementById("pause");
// 加载元数据
v.onloadedmetadata = function(){
console.log("loadedmetadata");
console.log("视频地址:" + v.currentSrc);
console.log("视频总时长:" + v.duration);
console.log("视频播放速率:" + v.playbackRate);
console.log("是否暂停:" + v.paused);
console.log("是否结束:" + v.ended);
console.log("是否静音:" + v.muted);
}
v.ontimeupdate = function(){
console.log("视频当前时间:" + v.currentTime);
console.log("当前缓冲量:" + v.buffered.end(0));
}
v.onvolumechange = function(){
console.log("当前音量:" + v.volume);
}
startbtn.onclick = function(){
// 播放
v.play();
};
pausebtn.onclick = function(){
// 暂停
v.pause();
}
</script>