PhoneGap 位置和时间
媒体位置和持续时间
之前，我们了解了如何播放音频和视频内容、控制媒体播放以及调整媒体音量。在本节中，我们将了解媒体位置和持续时间。当我们处理媒体时，我们也经常想知道特定媒体片段的长度以及我们在该特定媒体片段中的位置。
这些是用于获取媒体位置和持续时间的以下步骤.
1) 创建 index3.html
我们将创建一个新的 html 文件，即 index3.html，其内容与index.html。我们将在 index3.html 文件中进行更改，而不会影响 index.html 中的代码。
2) 在用户界面中创建一个输出字段
现在，我们将使用
标签为位置和持续时间创建输出字段一>。这些输出标签用于通过以下方式显示媒体位置和持续时间:
<output id="outPosition"></output>/<output id="outDuration"></output>
3) outDuration
现在，我们将使用 Id 获取 outDuration 字段，并通过将分钟转换为秒来分配玩家的持续时间以下方式:
document.getElementById('outDuration').innerHTML = Math.round(player.duration) + " seconds";
4) outPosition
现在，我们将使用 setInterval() 函数找到区间。该函数包含两个参数，即显示时间和持续时间。我们将通过以下方式在 window.onload 函数之外创建 displayTime 函数:
intv = setInterval(displayTime, 500);<!?this line will be added in onload function-->
function displayTime(e)
{
document.getElementById('outPosition').innerHTML = Math.round(player.currentTime);
}
完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Audio and Video Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
var player;
window.onload = function()
{
player = document.getElementById('mysong');
document.getElementById('Play').addEventListener('click', function(){
player.play();
document.getElementById('outDuration').innerHTML = Math.round(player.duration) + " seconds";
intv = setInterval(displayTime, 500);
});
document.getElementById('Pause').addEventListener('click', function(){
player.pause();
});
document.getElementById('Stop').addEventListener('click', function(){
player.pause();
player.currentTime = 0;
});
$('#rngVolume').on("slidestop", function(){
var volume = document.getElementById('rngVolume').value;
console.log(volume);
player.volume = volume;
});
}
function displayTime(e)
{
document.getElementById('outPosition').innerHTML = Math.round(player.currentTime);
}
</script>
</head>
<body>
<audio id="mysong">
<source src="media/Saki.mp3"/>
</audio>
<button id="Play">Play</button>
<button id="Pause">Pause</button>
<button id="Stop">Stop</button>
<output id="outPosition"></output>
<output id="outDuration"></output>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
