html5 video/audio 标签
Video
认识video
支持的常见格式:mp4、webm、ogv
浏览器兼容:
- safari 只支持 mp4 格式;
- ie9 支持video标签,格式只支持mp4;
<!-- 写法一 -->
<video src="static/video.mp4" controls></video>
<!-- 写法二 -->
<video controls>
<source src="static/video.mp4">
<source src="static/video.ogv">
您的浏览器不支持
</video>
常用属性
- width 改变宽度;height 改变高度;width、height 一起使用,大小会改变,但是播放区域会自匹配。
- autoplay 自动播放;(在chrome 下单独使用不会自动播放,需要增加muted 静音属性才能自动播放)
- loop 自动重新播放;
- poster 没播放时,显示的图片;(仅视频刚加载还没播放时有效)
- muted 静音;
API 事件
<video src="static/video.mp4" controls id="mVideo"></video>
<script type="text/javascript">
var video = document.querySelector("#mVideo");
// 播放
video.play();
// 暂停
video.pause();
// 总时长durations (需要保证音频加载完成)
window.console.log(video.durations);
// 当前播放时currentTime
video.currentTime = 30;
window.console.log(video.currentTime);
// 视频播放资源src
video.src = "static/video2.mp4";
// 音量volumn (0-1)
video.volumn = 0.5;
// 控件controls
video.controls = true;
// 静音muted
video.muted = true;
// 当前网络状态networkState
// 0 没有初始化 1 找到了资源;2 正在下载资源; 3 没找到资源(一开始加载时也是3 状态)
window.console.log(video.networkState);
// 当前可播放资源currentSrc
// 1. src 不保证可播放性,currentSrc 保证
// 2. currentSrc 只有get,没有set
window.console.log(video.currentSrc);
// 是否播放结束ended
window.console.log(video.ended);
video.addEventListener('ended', function(){
// TODO
});
// 循环loop
video.loop = true;
// 播放速度playbackRate (默认1 表示正常速度)
video.playbackRate = 2; // 0.5
// 就绪状态readyState
// 0 未就绪 1 有数据,但还不足播放 2 数据可用,但是没有下一帧数据 3 数据正在缓冲 4 已经就绪,可以播放
window.console.log(video.readyState);
// 监听视频播放的状态timeupdate
video.addEventListener("timeupdate", function(){
// TODO
});
// 当用户对视频的进度条并且已经完成操作时会触发的事件 seeked
video.onseeked = function(){ // TODO };
// 相比seeked 频次更高
video.onseeking = function(){ // TODO };
// 当音量更改时volumechange
video.onvolumechange = function(){ // TODO };
// 让video标签变成全屏 requestFullscreen
// 根据不同浏览器,调用相应兼容api
// mozRequestFullScreen, webkitRequestFullscreen
// 需要在事件中调用
var someOtherElement = document.querySelector("#someOther");
someOtherElement.onclick = function(){
if(video.webkitRequestFullscreen){
video.webkitRequestFullscreen();
}
else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}
};
// 刷新下资源 load
video.load();
//canplay 视频已经加载好 可以开始播放了
video.addEventListener('canplay', function(){
// TODO
});
</script>
on 和addEventListener 简单区别:前者会覆盖,后者不会。
Audio
认识audio
支持格式:mp3、wav、ogg
兼容性:
- mp3 格式都兼容;
- ogg 格式支持:chrome、火狐;不支持safari;
var myAudio = new Audio();
myAudio.src = 'static/audio.wav';
myAudio.play();
说明:类似video。
至此,结束。