audio和video元素_html/css_WEB-ITnose

目录 [1]HTML元素 audio video source [2]API 方法 属性 事件 audio专有

前面的话

  document.onclick = function(){    console.log(audio.played.end(0));}  

(8)readyState

　　返回音频或视频的当前就绪状态

readyState:0(没有关于音频或视频是否就绪的信息)readyState:1(关于音频或视频就绪的元数据)readyState:2(关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧)readyState:3(当前及至少下一帧的数据是可用的)readyState:4(可用数据足以开始播放) 

  //0console.log(audio.readyState);//4document.onclick = function(){    console.log(audio.readyState);}      

(9)seekable

　　返回可寻址范围，可寻址范围是指用户在视频或音频中可寻址(移动播放位置)的时间范围。对于流视频，通常可以寻址到视频中的任何位置，即使其尚未完成缓冲

seekable.length(获得音频或视频中可寻址范围的数量)seekable.start(index)(获得可寻址范围的开始位置)seekable.end(index)(获得可寻址范围的结束位置) 

  document.onclick = function(){    console.log(audio.seekable.end(0));}  

(10)seeking

seeking:true(用户正在寻址)seeking:false(用户没有在寻址) 

  audio.onseeking = function(){    console.log(audio.seeking);    }      

(1)autoplay

autoplay:false(默认，不自动播放)autoplay:true(自动播放) 

(2)controls

controls:false(默认，不显示控件)controls:true(显示控件) 

(3)crossOrigin

　　设置或返回CORS设置

(4)currentTime

　　设置或返回音频或视频的当前位置(以秒计)

  var audio = document.getElementById('audio');document.onclick = function(){    console.log(audio.currentTime);        audio.currentTime = 5;    console.log(audio.currentTime);};   

(5)defaultMuted(只有chrome支持)

defaultMuted:true(初始静音)defaultMuted:false(默认，初始不静音) 

audio.defaultMuted = true; 

(6)muted

muted:true(静音)muted:false(不静音) 

 音量开关   

(7)defaultPlaybackRate

defaultPlaybackRate:1(正常速度)defaultPlaybackRate:0.5(半速)defaultPlaybackRate:2(倍速)defaultPlaybackRate:-1(向后正常速度)defaultPlaybackRate:-0.5(向后半速) 

var audio = document.getElementById('audio');setTimeout(function(){    audio.defaultPlaybackRate = 0.5;    audio.load();    },1000); 

(8)playbackRate

playbackRate:1(正常速度)playbackRate:0.5(半速)playbackRate:2(倍速)playbackRate:-1(向后正常速度)playbackRate:-0.5(向后半速) 

  var array = [-1,-0.5,0.5,1,2];var i = 0;var audio = document.getElementById('audio');document.onclick = function(){    audio.playbackRate = array[i];    console.log(audio.playbackRate);    i++;    i=i%5;} 

(9)loop

loop:true(循环播放)loop:false(默认，不循环播放) 

(10)preload

　　设置或返回是否在页面加载后立即加载音频或视频

preload:auto;(一旦页面加载，则开始加载音频或视频)preload:metadata;(当页面加载后仅加载音频或视频的元数据)preload:none;(页面加载后不加载音频或视频) 

　　[注意]当设置autoplay时，该属性无效

(11)src

　　设置或返回音频或视频的当前来源

  console.log(audio.src);document.onclick = function(){    console.log(audio.src);    audio.src = 'http://7xpdkf测试数据1.z0.glb.clouddn测试数据/song.mp3';    audio.load();    console.log(audio.src);}      

(12)volume

　　设置或返回音频或视频的当前音量

volume(取得为0-1，0为静音，1为最大，默认为1)     

 增大音量  =0.1)audio.volume-=0.1;">减小音量   

事件

　　当音频或视频正在加载过程中，会依次发生以下事件：

loadstart:提示浏览器开始寻找指定的音频或视频progress:提示浏览器正在下载指定的音频或视频durationchange:提示音频或视频的时长已改变loadedmetadata:提示音频或视频的元数据已加载loadeddata:提示音频或视频的当前帧已加载，但没有足够数据播放下一帧canplay:提示浏览器能够开始播放指定的音频或视频canplaythrough:提示音频或视频能够不停顿地一直播放progress:提示浏览器正在下载指定的音频或视频 

      audio.onloadstart = function(){    console.log('loadstart');}audio.ondurationchange = function(){    console.log('durationchange');}    audio.onloadedmetadata = function(){    console.log('loadedmetadata');}    audio.onloadeddata = function(){    console.log('loadeddata');}    audio.onprogress = function(){    console.log('progress');}    audio.oncanplay = function(){    console.log('canplay');}    audio.oncanplaythrough = function(){    console.log('canplaythrough');}      

　　影响音频或视频数据加载的事件有以下几个：

abort:在音频或视频终止加载时触发error:在音频或视频加载发生错误时触发stalled:在浏览器尝试获取媒体数据，但数据不可用时触发suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发，或者因为被暂停)
empted:在发生故障并且文件突然不可用时触发
 

   setTimeout(function(){    video.src='';},2000);    video.onabort = function(){    console.log('abort');}video.onerror = function(){    console.log('error');}    video.onstalled = function(){    console.log('stalled');}    video.onsuspend = function(){    console.log('suspend');}    video.onemptied = function(){    console.log('emptied');}  

　　音频或视频控制按钮发生改变时触发以下事件:

play:音频或视频文件已经就绪可以开始播放时触发playing:音频或视频已开始播放时触发ended:音频或视频文件播放完毕后触发pause:音频或视频文件暂停时触发ratechange:播放速度改变进触发seeked:指示定位已结束时触发seeking:正在进行指示定位时触发timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]volumechange:音量改变时触发waiting:需要缓冲下一帧而停止时触发 

      var i = 1;document.onclick = function(){    i+=0.1;    audio.playbackRate = i;}audio.onended = function(){    console.log('ended');}audio.onpause = function(){    console.log('pause');}    audio.onplay = function(){    console.log('play');}    audio.onplaying = function(){    console.log('playing');}    audio.onratechange = function(){    console.log('ratechange');}    audio.onseeked = function(){    console.log('seeked');}    audio.onseeking = function(){    console.log('seeking');}    audio.ontimeupdate = function(){    console.log('timeupdate');}    audio.onvolumechange = function(){    console.log('volumechange');}    audio.onwaiting = function(){    console.log('waiting');}      

audio专有

　　元素在一个原生的javascript构造函数Audio，可以在任何时候播放音频。Audio和Image很像，但Audio不用像Image那样必须插入到文档中，只要创建一个新实例，并传入音频源文件即可

var audio = new Audio('test.mp3');     

 var audio = new Audio('http://7xpdkf测试数据1.z0.glb.clouddn测试数据/honey.mp3');audio.oncanplaythrough = function(){    audio.controls = true;    document.body.appendChild(audio);}  

查看更多关于audio和video元素_html/css_WEB-ITnose的详细内容...