Video/audio标签的一些基础使用心得

常用方法

.play（）：用于音频视频的播放

.pause（）：用于音频视频的暂停

 

常用属性

1 

durantion：获取目标标签的音频视频文件的时长

loop：设置是否循环播放，有这个标签就循环播放

control：设置是否显示控制组件，有这个标签就显示

src：设置文件路径，可以为blob路径，也可以为base64路径，也可以为绝对路径

currentTime：获取或设置当前音频视频文件的播放时间

autoplay：设置是否自动播放，如果有该属性则打开页面时就自动播放

autobuffer：设置文件播放前是否自动缓存

 

常用事件

onloadstart：文件开始加载时触发

oncanplay：文件加载完成可以播放时触发

ondurationchange：文件时长发生变化时触发

onended：文件播放结束时触发

onplay：文件播放时触发

ontimeupdate：文件当前播放时间（即currentTime属性）发生变化时触发

 

some tips：

一、duration的获取

1.$("audio")[0].oncanplay = function(){
　　console.log($(this)[0].duration);
}

2.$("audio")[0].ondurationchange = function(){
console.log($(this)[0].duration);
}

3、console.log($("audio")[0].duration);

第三句无法获得duration，duration获取必须在文件加载完成后才能获取。1,2都能获取。所以duration一般会和oncanplay、ondurationchange搭配使用

 

二、事件都是异步的

上面代码中，首先打印出来的是NaN，因为上面事件的完成需要一定时间，也就是关于duration的获取和渲染到标签中最好是在加载事件中完成，如

1 $("audio")[0].oncanplay = function(){
2             $("textarea").val($(this)[0].duration);
3         }

而不是

1 var time;
2 $("audio")[0].oncanplay = function(){
3         time  = $(this)[0].duration;    
4         }
5 $("textarea").val(time); //内容为NaN

 

三、durationchange的用法

durationchange虽然是时长改变时触发，但是根据以下代码：

1

 $("audio")[0].ondurationchange = function(){
2             alert(1);
3         }
4 setTimeout(function(){
5             $("audio")[0].src = "Batmobile Battle Mode Reveal Music.mp3";
6         },3000);

可以输出两次1，也就是说只要只要文件重新加载，即便是同个文件，同样的时长，也会触发该事件

 

四、通过input里的file表单上传多媒体文件给多媒体标签

想到的方法及其可行性

1.利用jquery的val属性直接获取地址

1 
2     

获得的结果是格式为  储存盘：\fakepath\文件名称.格式

因为浏览器出于安全原因不允许直接获取本地文件，所以获得是屏蔽了真实地址的假地址，所以该方法不可行

 

2.利用FileReader对象获取

 1 
 2     

可以获取文件地址base64形式（不是很了解），但是长度过长，由于是想利用localStoragr储存，储存不了太长，所以不可行

 

3.利用window.URL.createObjectURL()获取

1 
2     

获得的是blob形式的地址，但是每次重启浏览器后的通个文件的blob的值是不一样的，所以无法实现长久储存的效果，不可行

 

4.利用浏览器会在标签的地址前面自动补全当前js文件所连接的html文件的文件路径的原理

1 var url = "uploadMusic/" + this.files[0].name;

直接将地址写为html所在文件的该文件所在的子文件加名字即可，局限性：音频视频必须放在html同个文件夹中

 

总结：浏览器保存本地文件的想法不可行，因为浏览器要防止网页恶意读取用户客户端文件，没有意义，玩玩还行