audio标签和video标签

1,053 阅读2分钟

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: 浏览器能够开始播放媒体数据,但是不确定已当前的速率能否顺利的播放完媒体。