来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] 这篇文章主要介绍了html5中 media（播放器）的api使用指南,需要的朋友可以参考下...
|
这篇文章主要介绍了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="http://github.com/LearnShare">http://github.com/LearnShare</a>" 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="http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/">http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/</a>" target="_blank">LearnShare.github.io</a>. API reference: <a href="<a href="https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement">https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement</a>" target="_blank">HTMLMediaElement</a> and <a href="<a href="http://www.w3schools.com/tags/ref_av_dom.asp">http://www.w3schools.com/tags/ref_av_dom.asp</a>" 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; } |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
