您现在的位置是:网站首页> 编程资料编程资料

html5中 media(播放器)的api使用指南HTML5 video标签(播放器)学习笔记(二):播放控制HTML5 video标签(播放器)学习笔记(一):使用入门HTML5制作酷炫音频播放器插件图文教程html5实现完美兼容各大浏览器的播放器html5 自定义播放器核心代码html5 音乐播放器 audio 标签使用概述HTML5 MiranaVideo播放器 (代码开源) 从零实现一个自定义html5播放器的示例代码

2023-10-14 516人已围观

简介 这篇文章主要介绍了html5中 media(播放器)的api使用指南,需要的朋友可以参考下

直接奉上示例代码,废话就不多说了。


复制代码
代码如下:





HTML Audio API





HTML5 Audio API


HTML5 Audio API demo by http://github.com/LearnShare" target="_blank">LearnShare.



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



View code on http://github.com/LearnShare/LearnShare.github.io/tree/master/labs/audio/" target="_blank">LearnShare.github.io.
API reference: https://developer.mozilla.org/zh-CN/docs/DOM/HTMLMediaElement" target="_blank">HTMLMediaElement and http://www.w3schools.com/tags/ref_av_dom.asp" target="_blank">Audio/Video DOM References





Audio Element



Open the developer tool to view console logs.




Controls




































































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 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.getElementB

-六神源码网