得知互动

标题: html5中 media（播放器）的api使用指南 [打印本页]

作者: swmozowtfl 时间: 2015-7-26 20:46
标题: html5中 media（播放器）的api使用指南
代码如下:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>html audio api</title>
<link rel=stylesheet href=./style/main.css />
<script src=./script/audio-controls.js></script>
</head>
<body>
<header>
<h1>html5 audio api</h1>
<p>html5 audio api demo by <a href=<a href=> target=_blank>learnshare</a>.</p>
<p>
last update @2013-04-23 20:40:00
+ add info table
update @2013-04-22 14:54:00
+ add dom events
update @2013-04-22 12:47:00
+ add getcurrentsrc button
</p>
<p>
view code on <a href=<a href=>
> target=_blank>learnshare.github.io</a>.
api reference: <a href=<a href=> target=_blank>htmlmediaelement</a> and <a href=<a href=> target=_blank>audio/video dom references</a>
</p>
</header>
<article>
<section>
<h2>audio element</h2>
<audio id=audio src=./media/music1.mp3 controls=controls></audio>
<p>open the <strong>developer tool</strong> to view console logs.</p>
</section>
<section>
<h2>controls</h2>
<button id=play>play</button>
<button id=pause>pause</button>
<button id=get_paused>getpaused</button>
<button id=get_ended>getended</button>

<button id=volume_down>volume-</button>
<button id=volume_up>volume+</button>
<button id=get_volume>getvolume</button>

<button id=get_src>getsrc</button>
<button id=play_music1>playmusic1</button>
<button id=play_music2>playmusic2</button>
<button id=remove_music>removemusic</button>
<button id=get_current_src>getcurrentsrc</button>

<button id=get_initial_time>getinitialtime</button>
<button id=get_duration>getduration</button>
<button id=get_seeking>getseeking</button>
<button id=jump_to>jumpto_30s</button>
<button id=get_current_time>getcurrenttime</button>
<button id=get_played>getplayed</button>

<button id=autoplay_on>autoplay_on</button>
<button id=autoplay_off>autoplay_off</button>
<button id=get_autoplay>getautoplay</button>

<button id=controls_show>controls_show</button>
<button id=controls_hide>controls_hide</button>
<button id=get_controls>getcontrols</button>

<button id=loop_on>loop_on</button>
<button id=loop_off>loop_off</button>
<button id=get_loop>getloop</button>

<button id=preload_metadata>preload_metadata</button>
<button id=get_preload>getpreload</button>

<button id=get_default_muted>getdefaultmuted</button>
<button id=mute>mute</button>
<button id=unmute>unmute</button>
<button id=get_muted>getmuted</button>

<button id=get_default_playback_rate>getdefaultplaybackrate</button>
<button id=playback_rate_down>playbackrate-</button>
<button id=playback_rate_up>playbackrate+</button>
<button id=get_playback_rate>getplaybackrate</button>

<button id=get_network_state>getnetworkstate</button>
<button id=get_ready_state>getreadystate</button>
<button id=get_buffered>getbuffered</button>
<button id=get_seekable>getseekable</button>
</section>
</article>
<aside>
<section>
<h3>player attrs</h3>
<table>
<tr>
<td>autoplay:</td>
<td id=autoplay></td>
</tr>
<tr>
<td>controls:</td>
<td id=controls></td>
</tr>
<tr>
<td>defaultmuted:</td>
<td id=default_muted></td>
</tr>
<tr>
<td>defaultplaybackrate:</td>
<td id=default_playback_rate></td>
</tr>
<tr>
<td>loop:</td>
<td id=loop></td>
</tr>
<tr>
<td>preload:</td>
<td id=preload></td>
</tr>
</table>
</section>
<section>
<h3>player info</h3>
<table>
<tr>
<td>src:</td>
<td id=src></td>
</tr>
<tr>
<td>currentsrc:</td>
<td id=current_src></td>
</tr>
<tr>
<td>duration:</td>
<td id=duration></td>
</tr>
<tr>
<td>currenttime:</td>
<td id=current_time></td>
</tr>
<tr>
<td>ended:</td>
<td id=ended></td>
</tr>
<tr>
<td>paused:</td>
<td id=paused></td>
</tr>
<tr>
<td>muted:</td>
<td id=muted></td>
</tr>
<tr>
<td>volume:</td>
<td id=volume></td>
</tr>
<tr>
<td>playbackrate:</td>
<td id=playback_rate></td>
</tr>
</table>
</section>
<section>
<h3>play status</h3>
<table>
<tr>
<td>networkstate:</td>
<td id=network_state></td>
</tr>
<tr>
<td>readystate:</td>
<td id=ready_state></td>
</tr>
<tr>
<td>buffered:</td>
<td id=buffered></td>
</tr>
<tr>
<td>seekable:</td>
<td id=seekable></td>
</tr>
<tr>
<td>played:</td>
<td id=played></td>
</tr>
<tr>
<td>error:</td>
<td id=error></td>
</tr>
</table>
</section>
</aside>
</body>
</html>

audio-controls.js

代码如下:
window.onload=function(){
// get autio element
var audio=document.getelementbyid(audio);
// play()
document.getelementbyid(play).onclick=function(){
audio.play();
console.log(play);
};
// pause()
document.getelementbyid(pause).onclick=function(){
audio.pause();
console.log(pause);
};
// get paused
document.getelementbyid(get_paused).onclick=function(){
console.log(audio.paused: +audio.paused);
};
// get ended
document.getelementbyid(get_ended).onclick=function(){
console.log(audio.ended: +audio.ended);
};
// set volume-
document.getelementbyid(volume_down).onclick=function(){
audio.volume-=0.2;
console.log(volume-0.2);
};
// set volume+
document.getelementbyid(volume_up).onclick=function(){
audio.volume+=0.2;
console.log(volume+0.2);
};
// get volume
document.getelementbyid(get_volume).onclick=function(){
console.log(audio.volume: +audio.volume);
};
// get src
document.getelementbyid(get_src).onclick=function(){
console.log(audio.src: +audio.src);
};
// set src_music1
document.getelementbyid(play_music1).onclick=function(){
audio.src=./media/music1.mp3;
updatesrc();
updatecurrentsrc();
console.log(play music1);
};
// set src_music2
document.getelementbyid(play_music2).onclick=function(){
audio.src=./media/music2.mp3;
updatesrc();
updatecurrentsrc();
console.log(play music2);
};
// set remove_music
document.getelementbyid(remove_music).onclick=function(){
audio.src=;
console.log(remove music);
};
// get currentsrc
document.getelementbyid(get_current_src).onclick=function(){
console.log(audio.currentsrc: +audio.currentsrc);
};
// get initialtime
document.getelementbyid(get_initial_time).onclick=function(){
console.log(audio.initialtime: +audio.initialtime);
};
// get duration
document.getelementbyid(get_duration).onclick=function(){
console.log(audio.duration: +audio.duration);
};
// get seeking
document.getelementbyid(get_seeking).onclick=function(){
console.log(audio.seeking: +audio.seeking);
};
// set currenttime
document.getelementbyid(jump_to).onclick=function(){
audio.currenttime=30;
console.log(jumpto 30s);
};
// get currenttime
document.getelementbyid(get_current_time).onclick=function(){
console.log(audio.currenttime: +audio.currenttime);
};
// get played
document.getelementbyid(get_played).onclick=function(){
console.log(audio.played:);
var ranges=audio.played;
var n=ranges.length;
for(var i=0;i<n;i++){
console.log((+ranges.start(i)+,+ranges.end(i)+));
}
};
// autoplay on
document.getelementbyid(autoplay_on).onclick=function(){
audio.autoplay=true;
updateautoplay();
console.log(autoplay on);
};
// autoplay off
document.getelementbyid(autoplay_off).onclick=function(){
audio.autoplay=false;
updateautoplay();
console.log(autoplay off);
};
// get autoplay
document.getelementbyid(get_autoplay).onclick=function(){
console.log(audio.autoplay: +audio.autoplay);
};
// controls show
document.getelementbyid(controls_show).onclick=function(){
audio.controls=true;
updatecontrols();
console.log(controls show);
};
// controls hide
document.getelementbyid(controls_hide).onclick=function(){
audio.controls=false;
updatecontrols();
console.log(controls hide);
};
// get controls
document.getelementbyid(get_controls).onclick=function(){
console.log(audio.controls: +audio.controls);
};
// loop on
document.getelementbyid(loop_on).onclick=function(){
audio.loop=true;
updateloop();
console.log(loop on);
};
// loop off
document.getelementbyid(loop_off).onclick=function(){
audio.loop=false;
updateloop();
console.log(loop off);
};
// get loop
document.getelementbyid(get_loop).onclick=function(){
console.log(audio.loop: +audio.loop);
};
// preload metadata
document.getelementbyid(preload_metadata).onclick=function(){
audio.preload=metadata;
updatepreload();
console.log(preload metadata);
};
// get preload
document.getelementbyid(get_preload).onclick=function(){
console.log(audio.preload: +audio.preload);
};
// get defaultmuted
document.getelementbyid(get_default_muted).onclick=function(){
console.log(audio.defaultmuted: +audio.defaultmuted);
};
// mute
document.getelementbyid(mute).onclick=function(){
audio.muted=true;
updatemuted();
console.log(audio mute);
};
// unmute
document.getelementbyid(unmute).onclick=function(){
audio.muted=false;
updatemuted();
console.log(audio unmute);
};
// get muted
document.getelementbyid(get_muted).onclick=function(){
console.log(audio.muted: +audio.muted);
};
// get defaultplaybackrate
document.getelementbyid(get_default_playback_rate).onclick=function(){
console.log(audio.defaultplaybackrate: +audio.defaultplaybackrate);
};
// set playbackrate-
document.getelementbyid(playback_rate_down).onclick=function(){
audio.playbackrate-=0.2;
console.log(playbackrate-0.2);
};
// set playbackrate+
document.getelementbyid(playback_rate_up).onclick=function(){
audio.playbackrate+=0.2;
console.log(playbackrate+0.2);
};
// get playbackrate
document.getelementbyid(get_playback_rate).onclick=function(){
console.log(audio.playbackrate: +audio.playbackrate);
};
// get networkstate
document.getelementbyid(get_network_state).onclick=function(){
console.log(audio.networkstate: +audio.networkstate);
};
// get readystate
document.getelementbyid(get_ready_state).onclick=function(){
console.log(audio.readystate: +audio.readystate);
};
// get buffered
document.getelementbyid(get_buffered).onclick=function(){
console.log(audio.buffered:);
var ranges=audio.buffered;
var n=ranges.length;
for(var i=0;i<n;i++){
console.log((+ranges.start(i)+,+ranges.end(i)+));
}
};
// get seekable
document.getelementbyid(get_seekable).onclick=function(){
console.log(audio.seekable:);
var ranges=audio.seekable;
var n=ranges.length;
for(var i=0;i<n;i++){
console.log((+ranges.start(i)+,+ranges.end(i)+));
}
};
// dom events
// abort
audio.addeventlistener(abort,function(){
console.log(event:abort);
});
// canplay
audio.addeventlistener(canplay,function(){
console.log(event:canplay);
});
// canplaythrough
audio.addeventlistener(canplaythrough,function(){
console.log(event:canplaythrough);
});
// durationchange
audio.addeventlistener(durationchange,function(){
updateduration();
console.log(event:durationchange);
});
// emptied
audio.addeventlistener(emptied,function(){
updatesrc();
updatecurrentsrc();
updateduration();
updatepaused();
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
updateplayed();
console.log(event:emptied);
});
// ended
audio.addeventlistener(ended,function(){
updateended();
console.log(event:ended);
});
// loadeddata
audio.addeventlistener(loadeddata,function(){
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
console.log(event:loadeddata);
});
// loadedmetadata
audio.addeventlistener(loadedmetadata,function(){
console.log(event:loadedmetadata);
});
// loadstart
audio.addeventlistener(loadstart,function(){
console.log(event:loadstart);
});
// pause
audio.addeventlistener(pause,function(){
updatepaused();
console.log(event:pause);
});
// play
audio.addeventlistener(play,function(){
updatepaused();
console.log(event:play);
});
// playing
audio.addeventlistener(playing,function(){
console.log(event:playing);
});
// progress
audio.addeventlistener(progress,function(){
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
console.log(event:progress);
});
// ratechange
audio.addeventlistener(ratechange,function(){
updateplaybackrate();
console.log(event:ratechange);
});
// seeked
audio.addeventlistener(seeked,function(){
console.log(event:seeked);
});
// seeking
audio.addeventlistener(seeking,function(){
console.log(event:seeking);
});
// stalled
audio.addeventlistener(stalled,function(){
console.log(event:stalled);
});
// suspend
audio.addeventlistener(suspend,function(){
console.log(event:suspend);
});
// timeupdate
audio.addeventlistener(timeupdate,function(){
updatecurrenttime();
updateended();
updateplayed();
console.log(event:timeupdate);
});
// volumechange
audio.addeventlistener(volumechange,function(){
updatevolume();
console.log(event:volumechange);
});
// waiting
audio.addeventlistener(waiting,function(){
console.log(event:waiting);
});
updateautoplay();
updatecontrols();
updatedefaultmuted();
updatedefaultplaybackrate();
updateloop();
updatepreload();
updatesrc();
updatecurrentsrc();
updateduration();
updatecurrenttime();
updatevolume();
updatepaused();
updatemuted();
updateended();
updateplaybackrate();
updatenetworkstate();
updatereadystate();
updatebuffered();
updateseekable();
updateplayed();
updateerror();
};
// functions to update info table
// autoplay
function updateautoplay(){
document.getelementbyid(autoplay).innerhtml=audio.autoplay;
}
// controls
function updatecontrols(){
document.getelementbyid(controls).innerhtml=audio.controls;
}
// defaultmuted
function updatedefaultmuted(){
document.getelementbyid(default_muted).innerhtml=audio.defaultmuted;
}
// defaultplaybackrate
function updatedefaultplaybackrate(){
document.getelementbyid(default_playback_rate).innerhtml=audio.defaultplaybackrate;
}
// loop
function updateloop(){
document.getelementbyid(loop).innerhtml=audio.loop;
}
// preload
function updatepreload(){
document.getelementbyid(preload).innerhtml=audio.preload;
}
// src
function updatesrc(){
document.getelementbyid(src).innerhtml=audio.src;
}
// currentsrc
function updatecurrentsrc(){
document.getelementbyid(current_src).innerhtml=audio.currentsrc;
}
// duration
function updateduration(){
document.getelementbyid(duration).innerhtml=audio.duration;
}
// currenttime
function updatecurrenttime(){
document.getelementbyid(current_time).innerhtml=audio.currenttime;
}
// ended
function updateended(){
document.getelementbyid(ended).innerhtml=audio.ended;
}
// paused
function updatepaused(){
document.getelementbyid(paused).innerhtml=audio.paused;
}
// muted
function updatemuted(){
document.getelementbyid(muted).innerhtml=audio.muted;
}
// volume
function updatevolume(){
document.getelementbyid(volume).innerhtml=audio.volume;
}
// playbackrate
function updateplaybackrate(){
document.getelementbyid(playback_rate).innerhtml=audio.playbackrate;
}
// networkstate
function updatenetworkstate(){
document.getelementbyid(network_state).innerhtml=audio.networkstate;
}
// readystate
function updatereadystate(){
document.getelementbyid(ready_state).innerhtml=audio.readystate;
}
// buffered
function updatebuffered(){
var ranges=audio.buffered;
var str=;
var n=ranges.length;
for(var i=0;i<n;i++){
str+=(+ranges.start(i)+,+ranges.end(i)+);
if(i!=n-1){
str+=
;
}
}
document.getelementbyid(buffered).innerhtml=str;
}
// seekable
function updateseekable(){
var ranges=audio.seekable;
var str=;
var n=ranges.length;
for(var i=0;i<n;i++){
str+=(+ranges.start(i)+,+ranges.end(i)+);
if(i!=n-1){
str+=
;
}
}
document.getelementbyid(seekable).innerhtml=str;
}
// played
function updateplayed(){
var ranges=audio.played;
var str=;
var n=ranges.length;
for(var i=0;i<n;i++){
str+=(+ranges.start(i)+,+ranges.end(i)+);
if(i!=n-1){
str+=
;
}
}
document.getelementbyid(played).innerhtml=str;
}
// error
function updateerror(){
document.getelementbyid(error).innerhtml=audio.error;
}

更多网页制作信息请查看：网页制作

作者: gevaemaidovef 时间: 2015-11-4 20:27
命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。

作者: seazvyt 时间: 2015-11-4 20:27
哎怎么说那~~

作者: alapScady 时间: 2015-11-4 20:28
来电来函..欢迎洽购...

作者: gevaemaidovef 时间: 2015-11-4 20:28
疯了.........

作者: effoggikeftor 时间: 2016-2-28 22:44
说嘛1~~~想说什么就说什么嘛~~

作者: wwzcdenleclv 时间: 2016-2-28 22:45
真的好久都没有这么笑了~ 好开心哦

作者: gevaemaidovef 时间: 2016-2-28 22:45
今天统计好像出了问题

作者: GoodyFouppy 时间: 2016-2-28 22:45
因删贴不及时所产生的任何法律（书法，基本法，劳动法，婚姻法，输入法，国际法，今日说法，与台湾关系法及文中涉及或可能涉及以及未及之法，各地治安管理条例）纠纷或责任本人概不负责。

欢迎光临得知互动 (https://bbs.dezhifl.com/)