首页 > 编程 > HTML > 正文

html5中 ,media(播放器)的api使用指南

2020-03-24 15:45:02
字体:
来源:转载
供稿:网友
代码如下:

<!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>

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表