html5中 media播放器的api使用指南.docx
《html5中 media播放器的api使用指南.docx》由会员分享，可在线阅读，更多相关《html5中 media播放器的api使用指南.docx（22页珍藏版）》请在冰豆网上搜索。
html5中media播放器的api使用指南
代码如下:
<!
doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>HTMLAudioAPI</title>
<linkrel="stylesheet"href="./style/main.css"/>
<scriptsrc="./script/audio-controls.js"></script>
</head>
<body>
<header>
<h1>HTML5AudioAPI</h1>
<p>HTML5AudioAPIdemoby<ahref="<ahref=">"target="_blank">LearnShare</a>.</p>
<p>
Lastupdate@2013-04-2320:
40:
00
+addinfotable
update@2013-04-2214:
54:
00
+addDOMevents
update@2013-04-2212:
47:
00
+addgetCurrentSrcbutton
</p>
<p>
Viewcodeon<ahref="<ahref="">
>"target="_blank">LearnShare.github.io</a>.
APIreference:
<ahref="<ahref=">"target="_blank">HTMLMediaElement</a>and<ahref="<ahref=">"target="_blank">Audio/VideoDOMReferences</a>
</p>
</header>
<article>
<section>
<h2>AudioElement</h2>
<audioid="audio"src="./media/music1.mp3"controls="controls"></audio>
<p>Openthe<strong>developertool</strong>toviewconsolelogs.</p>
</section>
<section>
<h2>Controls</h2>
<buttonid="play">play</button>
<buttonid="pause">pause</button>
<buttonid="get_paused">getPaused</button>
<buttonid="get_ended">getEnded</button>
<buttonid="volume_down">volume-</button>
<buttonid="volume_up">volume+</button>
<buttonid="get_volume">getVolume</button>
<buttonid="get_src">getSrc</button>
<buttonid="play_music1">playMusic1</button>
<buttonid="play_music2">playMusic2</button>
<buttonid="remove_music">removeMusic</button>
<buttonid="get_current_src">getCurrentSrc</button>
<buttonid="get_initial_time">getInitialTime</button>
<buttonid="get_duration">getDuration</button>
<buttonid="get_seeking">getSeeking</button>
<buttonid="jump_to">jumpTo_30s</button>
<buttonid="get_current_time">getCurrentTime</button>
<buttonid="get_played">getPlayed</button>
<buttonid="autoplay_on">autoplay_on</button>
<buttonid="autoplay_off">autoplay_off</button>
<buttonid="get_autoplay">getAutoplay</button>
<buttonid="controls_show">controls_show</button>
<buttonid="controls_hide">controls_hide</button>
<buttonid="get_controls">getControls</button>
<buttonid="loop_on">loop_on</button>
<buttonid="loop_off">loop_off</button>
<buttonid="get_loop">getLoop</button>
<buttonid="preload_metadata">preload_metadata</button>
<buttonid="get_preload">getPreload</button>
<buttonid="get_default_muted">getDefaultMuted</button>
<buttonid="mute">mute</button>
<buttonid="unmute">unmute</button>
<buttonid="get_muted">getMuted</button>
<buttonid="get_default_playback_rate">getDefaultPlaybackRate</button>
<buttonid="playback_rate_down">playbackRate-</button>
<buttonid="playback_rate_up">playbackRate+</button>
<buttonid="get_playback_rate">getPlaybackRate</button>
<buttonid="get_network_state">getNetworkState</button>
<buttonid="get_ready_state">getReadyState</button>
<buttonid="get_buffered">getBuffered</button>
<buttonid="get_seekable">getSeekable</button>
</section>
</article>
<aside>
<section>
<h3>PlayerAttrs</h3>
<table>
<tr>
<td>autoplay:
</td>
<tdid="autoplay"></td>
</tr>
<tr>
<td>controls:
</td>
<tdid="controls"></td>
</tr>
<tr>
<td>defaultMuted:
</td>
<tdid="default_muted"></td>
</tr>
<tr>
<td>defaultPlaybackRate:
</td>
<tdid="default_playback_rate"></td>
</tr>
<tr>
<td>loop:
</td>
<tdid="loop"></td>
</tr>
<tr>
<td>preload:
</td>
<tdid="preload"></td>
</tr>
</table>
</section>
<section>
<h3>PlayerInfo</h3>
<table>
<tr>
<td>src:
</td>
<tdid="src"></td>
</tr>
<tr>
<td>currentSrc:
</td>
<tdid="current_src"></td>
</tr>
<tr>
<td>duration:
</td>
<tdid="duration"></td>
</tr>
<tr>
<td>currentTime:
</td>
<tdid="current_time"></td>
</tr>
<tr>
<td>ended:
</td>
<tdid="ended"></td>
</tr>
<tr>
<td>paused:
</td>
<tdid="paused"></td>
</tr>
<tr>
<td>muted:
</td>
<tdid="muted"></td>
</tr>
<tr>
<td>volume:
</td>
<tdid="volume"></td>
</tr>
<tr>
<td>playbackRate:
</td>
<tdid="playback_rate"></td>
</tr>
</table>
</section>
<section>
<h3>Playstatus</h3>
<table>
<tr>
<td>networkState:
</td>
<tdid="network_state"></td>
</tr>
<tr>
<td>readyState:
</td>
<tdid="ready_state"></td>
</tr>
<tr>
<td>buffered:
</td>
<tdid="buffered"></td>
</tr>
<tr>
<td>seekable:
</td>
<tdid="seekable"></td>
</tr>
<tr>
<td>played:
</td>
<tdid="played"></td>
</tr>
<tr>
<td>error:
</td>
<tdid="error"></td>
</tr>
</table>
</section>
</aside>
</body>
</html>
audio-controls.js
代码如下:
window.onload=function（）{
//getautioelement
varaudio=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"）;
};
//getpaused
document.getElementById（"get_paused"）.onclick=function（）{
console.log（"audio.paused:
"+audio.paused）;
};
//getended
document.getElementById（"get_ended"）.onclick=function（）{
console.log（"audio.ended:
"+audio.ended）;
};
//setvolume-
document.getElementById（"volume_down"）.onclick=function（）{
audio.volume-=0.2;
console.log（"volume-0.2"）;
};
//setvolume+
document.getElementById（"volume_up"）.onclick=function（）{
audio.volume+=0.2;
console.log（"volume+0.2"）;
};
//getvolume
document.getElementById（"get_volume"）.onclick=function（）{
console.log（"audio.volume:
"+audio.volume）;
};
//getsrc
document.getElementById（"get_src"）.onclick=function（）{
console.log（"audio.src:
"+audio.src）;
};
//setsrc_music1
document.getElementById（"play_music1"）.onclick=function（）{
audio.src="./media/music1.mp3";
updateSrc（）;
updateCurrentSrc（）;
console.log（"playmusic1"）;
};
//setsrc_music2
document.getElementById（"play_music2"）.onclick=function（）{
audio.src="./media/music2.mp3";
updateSrc（）;
updateCurrentSrc（）;
console.log（"playmusic2"）;
};
//setremove_music
document.getElementById（"remove_music"）.onclick=function（）{
audio.src="";
console.log（"removemusic"）;
};
//getcurrentSrc
document.getElementById（"get_current_src"）.onclick=function（）{
console.log（"audio.currentSrc:
"+audio.currentSrc）;
};
//getinitialTime
document.getElementById（"get_initial_time"）.onclick=function（）{
console.log（"audio.initialTime:
"+audio.initialTime）;
};
//getduration
document.getElementById（"get_duration"）.onclick=function（）{
console.log（"audio.duration:
"+audio.duration）;
};
//getseeking
document.getElementById（"get_seeking"）.onclick=function（）{
console.log（"audio.seeking:
"+audio.seeking）;
};
//setcurrentTime
document.getElementById（"jump_to"）.onclick=function（）{
audio.currentTime=30;
console.log（"jumpTo30s"）;
};
//getcurrentTime
document.getElementById（"get_current_time"）.onclick=function（）{
console.log（"audio.currentTime:
"+audio.currentTime）;
};
//getplayed
document.getElementById（"get_played"）.onclick=function（）{
console.log（"audio.played:
"）;
varranges=audio.played;
varn=ranges.length;
for（vari=0;i<n;i++）{
console.log（"（"+ranges.start（i）+","+ranges.end（i）+"）"）;
}
};
//autoplayon
document.getElementById（"autoplay_on"）.onclick=function（）{
audio.autoplay=true;
updateAutoplay（）;
console.log（"autoplayon"）;
};
//autoplayoff
document.getElementById（"autoplay_off"）.onclick=function（）{
audio.autoplay=false;
updateAutoplay（）;
console.log（"autoplayoff"）;
};
//getautoplay
document.getElementById（"get_autoplay"）.onclick=function（）{
console.log（"audio.autoplay:
"+audio.autoplay）;
};
//controlsshow
document.getElementById（"controls_show"）.onclick=function（）{
audio.controls=true;
updateControls（）;
console.log（"controlsshow"）;
};
//controlshide
document.
升级会员 