常用方法

.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标签的一些基础使用心得的更多相关文章

  1. html5 video/audio 标签

    一般来说推荐使用,第三方的媒体播放库[例如 videojs 等],这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效! 这里还是 记录一下 html 原生 vide ...

  2. html5media.js 让浏览器兼容<Video><Audio> 标签

    介绍:https://html5media.info/ 项目:https://github.com/etianen/html5media Wiki:https://github.com/etianen ...

  3. html5之音频、视频(video&audio)

    音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...

  4. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

  5. <video>和<audio>标签,对视频和音频的支持

    H5新增了<video>和<audio>标签,提供对视频和音频的支持 <audio>的属性与<video>属性相同 <video> vide ...

  6. html5中的video标签和audio标签

    不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...

  7. video标签、audio标签

    1.video标签 <video src="nans.mp4" controls="controls"  autoplay="autoplay& ...

  8. video/audio在ios/android上播放兼容

    1.audio自动播放 <audio src='xxx.mp3' autoplay></audio> 上面是audio标签autoplay属性是自动播放,但是在安卓部分浏览器和 ...

  9. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

随机推荐

  1. CodeForces - 940E - Cashback +贪心+DP

    传送门:CodeForces - 940E - Cashback 题意:在一个长度为n的数组中,可以分出长度为 k 连续的多个数组b(每个数组 b 的 k 可不相同),然后,可以对每个数组 b 进行删 ...

  2. J farm

    #include<iostream> #include<vector> #include<algorithm> #include<cstring> #i ...

  3. 淘淘购物系统 (Python)

    #首页def tao_first(): t1 = '欢迎进入淘淘购物'.center(110) print(t1) print('~' * 130) t2 = '注册'.center(20) prin ...

  4. java-冒泡排序笔记

    //冒泡排序public class BubbleSort {    //    public static void main(String[] args) {//        // TODO 自 ...

  5. SQL数据同步到ELK(二)- Elastic Search 安装

    开篇废话 没错,前面扯了一堆SQL SERVER,其实我连Elastic Search根本没动手玩过(是不是与时代有点脱节了?),那今天我就准备尝试安装一个ELK的简单集群出来(这个集群是使用我的小米 ...

  6. springmvc使用JSR-303对复杂对象进行校验

    JSR-303 是JAVA EE 6 中的一项子规范,叫做Bean Validation,官方参考实现是Hibernate Validator.此实现与Hibernate ORM 没有任何关系.JSR ...

  7. Python中流程控制语句之IF语句

    生活中经常遇到的各种选择和判断在程序中也会遇到,比如玩色子,猜大小,比如选择哪条路回家?Python程序中同样也会遇到.IF语句就是用作条件判断的控制语句. 语法一: if 条件: # 引号是将条件与 ...

  8. 四大组件初始之Broadcast

    在进行应用设计时,需要获取很多环境参数,像电量,音量,亮度,网络等.相比较每次去询问android这些信息改变了吗.让Android告诉我们,这些信息改变了更加合理.只要这些信息改变,Android通 ...

  9. Winform中设置ZedGraph曲线图的水平与竖直参考线

    场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  10. java需要了解和学习的技能

    一:系统架构师是一个最终确认和评估系统需求,给出开发规范,搭建系统实现的核心构架,并澄清技术细节.扫清主要难点的技术人员.主要着眼于系统的“技术实现”.因此他/她应该是特定的开发平台.语言.工具的大师 ...