1.audio指JS原生对象,假如用jquery获取到audio标签后,需要dom[0]转为原生JS对象

if(audio.paused){

  //如果音频暂停,就播放

  audio.play();

}else{

  //如果音频播放,就暂停

  audio.pause();

}

2.

var is_playFinish = setInterval(function(){

  if(audio.ended){

    //如果音频播放完毕

    //do something

    window.clearInterval(is_playFinish);

}

},10);

3.网络加载进度条

var buffered;

if( audio.readyState == 4 && ( buffered = audio.buffered.end(0) ) ){

  //buffered返回的是网络加载时长,和总时间做比,可以得到网络加载进度

}

JS就是各种钩子,各种状态下的回调(具体钩子名,回调的具体应用要熟记)

以函数{}为界,局部作用域。

方法               方法描述

addTextTrack()    为音视频加入一个新的文本轨迹    
canPlayType()    检查指定的音视频格式是否得到支持    
load()    重新加载音视频标签    
play()    播放音视频    
pause()    暂停播放当前的音视频    
-------------------------
属性           属性描述
audioTracks    返回可用的音轨列表(MultipleTrackList对象)    
autoplay    媒体加载后自动播放    
buffered    返回缓冲部件的时间范围(TimeRanges对象)    
controller    返回当前的媒体控制器(MediaController对象)    
controls    显示播控控件    
crossOrigin    CORS设置    
currentSrc    返回当前媒体的URL    
currentTime    当前播放的时间,单位秒    
defaultMuted    缺省是否静音    
defaultPlaybackRate    播控的缺省倍速    
duration    返回媒体的播放总时长,单位秒    
ended    返回当前播放是否结束标志    
error    返回当前播放的错误状态    
initialTime    返回初始播放的位置    
loop    是否循环播放    
mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)    
muted    是否静音    
networkState    返回当前网络状态    
paused    是否暂停    
playbackRate    播放的倍速    
played    当前播放部件已经播放的时间范围(TimeRanges对象)    
preload    页面加载时是否同时加载音视频    
readyState    返回当前的准备状态 {
    0: HAVE_NOTHING 没有准备就绪的状态
    1: HAVE_METADATA 关于音频就绪的元数据
    2: HAVE_CURRENT_DATA 当前可用,但下一帧不确定
    3: HAVE_FUTURE_DATA 当前和下一帧可用
    4: HAVE_ENOUGH_DATA 有足够的数据支持播放
}   
seekable    返回当前可跳转部件的时间范围(TimeRanges对象)    
seeking    返回用户是否做了跳转操作    
src    当前音视频源的URL    
startOffsetTime    返回当前的时间偏移(Date对象)    
textTracks    返回可用的文本轨迹(TextTrackList对象)    
videoTracks    返回可用的视频轨迹(VideoTrackList对象)    
volume    音量值    
事件
事件描述
abort    当音视频加载被异常终止时产生该事件    
canplay    当浏览器可以开始播放该音视频时产生该事件    
canplaythrough    当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件    
durationchange    当媒体的总时长改变时产生该事件    
emptied    当前播放列表为空时产生该事件    
ended    当前播放列表结束时产生该事件    
error    当加载媒体发生错误时产生该事件    
loadeddata    当加载媒体数据时产生该事件    
loadedmetadata    当收到总时长,分辨率和字轨等metadata时产生该事件    
loadstart    当开始查找媒体数据时产生该事件    
pause    当媒体暂停时产生该事件    
play    当媒体播放时产生该事件    
playing    当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件    
progress    当获取到媒体数据时产生该事件    
ratechange    当播放倍数改变时产生该事件    
seeked    当用户完成跳转时产生该事件    
seeking    当用户正执行跳转时操作的时候产生该事件    
stalled    当试图获取媒体数据,但数据还不可用时产生该事件    
suspend    当获取不到数据时产生该事件    
timeupdate    当前播放位置发生改变时产生该事件    
volumechange    当前音量发生改变时产生该事件    
waiting    当视频因缓冲下一帧而停止时产生该事件

html5 audio标签相关知识点总结的更多相关文章

  1. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  2. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  3. HTML5 Audio标签方法和函数API介绍

    问说网 > 文章教程 > 网页制作 > HTML5 Audio标签方法和函数API介绍 Audio APIHTML5HTML5 Audio预加载 HTML5 Audio标签方法和函数 ...

  4. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  5. html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案

    html5 audio标签微信部分苹果手机不能自动播放音乐终极解决方案 大家都知道需要在点击时候后 播放 ps:如果点击ajax 回来播放也不行,必须点击立即播放 要背景自动播放只能采取下面方案< ...

  6. html5 audio标签切换播放音乐的方法

    html5 audio标签切换播放音乐的方法<pre><audio id="music1" preload loop="loop">&l ...

  7. ios加载html5 audio标签用js无法自动播放

    html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...

  8. HTML5 audio标签自制音乐播放器

    相关技能 HTML5+CSS3(实现页面布局和动态效果) Iconfont(使用矢量图标库添加播放器相关图标) LESS (动态CSS编写) jQuery(快速编写js脚本) gulp+webpack ...

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

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

随机推荐

  1. js 判断对touch事件支持

    $.support = (function() { var support = { touch: !!(('ontouchstart' in window) || window.DocumentTou ...

  2. 《一》安装 TP5

    tp5 官方参考手册:http://www.kancloud.cn/manual/thinkphp5/118008 我这里采用的是 composer 安装,如果您没有安装 composer 的话 tp ...

  3. U-BOOT启动流程分析--start.s(二)

    一.概述 u-boot的启动流程: 从文件层面上看主要流程是在两个文件中:cpu/arm920t/start.s,lib_arm/board.c, 先来分析start.s    在flash中执行的引 ...

  4. caioj 1065 动态规划入门(一维一边推3:合唱队形)

    就是最长上升子序列,但是要用n^2的算法. #include<cstdio> #include<algorithm> #define REP(i, a, b) for(int ...

  5. mysql not in用法

    select * from zan where uid not in(select uid from zan where zhongjiang !=0) group by uid order by r ...

  6. BZOJ 刷题记录 PART 5

    拖了好久才写的. [BZOJ2821]接触分块大法.这道题略有点新颖.首先我们先分块.然后统计每块中每一个数出现的个数. 以下是联立各个方块,预处理出第I个方块到第J个方块出现正偶数次数的个数. fo ...

  7. Greenplum中定义数据库对象之创建与管理模式

    创建与管理模式 概述:DB内组织对象的一种逻辑结构.一个DB内能够有多个模式.在未指定模式时默认放置在public中.能够通过"\dn"方式查看数据库中现有模式. testdw=# ...

  8. 编译QCAD

    编译QCAD eryar@163.com 目前开源的二维CAD有QCAD.LibreCAD等,且LibreCAD可以说是QCAD的分支版本.对比这款开源软件,发现QCAD的功能与操作习惯和AutoCA ...

  9. LeetCode Implement strStr()(Sunday算法)

    LeetCode解题之Implement strStr() 原题 实现字符串子串匹配函数strStr(). 假设字符串A是字符串B的子串.则返回A在B中首次出现的地址.否则返回-1. 注意点: - 空 ...

  10. Android 给图片 加边框

    图片处理时,有时需要为图片加一些边框,下面介绍一种为图片添加简单边框的方法. 基本思路是:将边框图片裁剪成八张小图片(图片大小最好一致,不然后面处理会很麻烦),分别对应左上角,左边,左下角,下边,右下 ...