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

常用方法

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

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

常用属性

 <audio src="Batmobile Battle Mode Reveal Music.mp3" autobuffer autoplay loop controls ></audio>

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的获取和渲染到标签中最好是在加载事件中完成，如

 $("audio")[0].oncanplay = function(){

             $("textarea").val($(this)[0].duration);

         }

而不是

 var time;

 $("audio")[0].oncanplay = function(){

         time  = $(this)[0].duration;

         }

 $("textarea").val(time); //内容为NaN

三、durationchange的用法

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

1<audio src="Batmobile Battle Mode Reveal Music.mp3" autobuffer autoloop loop controls ></audio>

 $("audio")[0].ondurationchange = function(){

             alert(1);

         }

 setTimeout(function(){

             $("audio")[0].src = "Batmobile Battle Mode Reveal Music.mp3";

         },3000);

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

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

想到的方法及其可行性

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

 <input type="file" name="" id="">

     <script type="text/javascript">

         var input = document.querySelector("input");

         input.onchange = function(){

             console.log($(this).val());

         }

     </script>

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

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

2.利用FileReader对象获取

 <input type="file" name="" id="">

     <script type="text/javascript">

         $("input")[0].onchange = function(){

             var reader = new FileReader();

             reader.readAsDataURL(this.files[0]);

             reader.onload = function(){

                 console.log(reader.result);

             }

         }

     </script>

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

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

 <input type="file" name="">

     <script type="text/javascript">

         $("input")[0].onchange = function(){

             var url = window.URL.createObjectURL($(this)[0].files[0]);

             console.log(url);

         }

     </script>

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

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

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

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

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

巴特西

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

最新文章

热门文章