audio和video的基本使用方法
1.第一种引入方法:
<audio scr="./sourse/song.mp3"></audio>
<video scr="./sourse/video.mp4"></audio>
2.第二种引入方法:
var audio = new Audio("路径地址");
var audio = document.createElement("audio");
// document.body.appendchild(audio);
ps:因为audio和video标签可以认为是公用一套API,所以大部分方法二者同时适用。
判断浏览器的支持情况(音频或视频的格式)
canPlayType()方法;
audio.canPlayType()如果返回probably或者maybe,则说明支持该格式,若返回null,则说明不支持。
方法
play() 播放
pause() 停止
load() 重置媒体元素并重新载入媒体,可终止正在进行的任务或者事件。
属性
音频或视频具有如下属性:
autoplay(该属性在谷歌浏览器中在video可用,但是要设置静音,audio不适用)
controls:表示是否显示播放条
loop: 是否循环播放
preload:是否进行预加载
none:不进行预加载。
metatata:部分预加载。
auto:全部预加载
currentSrc:返回资源链接(注意要资源加载完成才能获取到)
myAudio.oncanPlay = function(){
console.log(currentSrc);
}
duration: 媒体持续时间(总时长,同时也需要资源加载完成才能获取到)
currentTime:返回或设置资源当前时间。
valume: 音量[0-1],可读可写
muted: 静音
属性2
playbackRate:读取或设置媒体资源播放的当前速率(大于1快放,大于0小于1慢放,无倒放)
paused/ended/seeking: 查询媒体播放状态,返回true/false
paused:是否暂停
ended:是否结束了
seeking:正在请求某一播放位置的媒体数据
played/buffered/seekable: 均返回一个TimeRanges对象
(timeRanges对象的length属性为部分时间段,end(i)返回已播放时间段的结束时间,start(i)返回已播放时间段的开始时间)
played:标明媒体资源在浏览器中已播放的时间范围。
buffered: 确定浏览器已经缓存媒体文件
seekable: 表明可以对当前媒体资源进行请求
事件
play: 媒体开始播放时触发
pause:媒体暂停时出发
ended: 资源播放结束
canplay: 浏览器能够开始播放媒体数据,但是不确定已当前的速率能否顺利的播放完媒体。