aam*_*iri 6 jquery events html5 audio-streaming ipad
我正在构建一个/ v html5流媒体网络应用程序.这个问题取决于项目的音频部分,但我确信当我开始使用视频部分时,我会遇到类似的情况.我的目标设备是iPad的Safari浏览器(因此我必须这样做html5).播放工作正常,但我有一个加载栏,需要反映已加载了多少轨道.遵循w3规范,我尝试使用jQuery以下方式实现:
var that = this;
that.player = $('audio')[0];
$('that.player').bind('progress',function(){
var buffer = that.player.buffered.end(0)
that.updateLoadBuffer(buffer);
});
这没用.'that.player.buffered'返回一个TimeRanges对象,TimeRanges有一个方法'end(index)',它返回缓冲区结束的回放位置,以秒为单位,由'index'指定的TimeRange.TimeRanges还有一个.length属性,告诉你对象封装了多少个TimeRanges.当我试图记录该属性时,我发现TimeRanges.length = 0,意味着没有传回TimeRanges.此外,当我将记录语句抛入绑定函数时,我发现'progress'事件从未被触发过.我有'loadedmetata'和'timeupdate'事件的单独函数,它们遵循类似的格式,并按预期启动.我尝试了其他捕获事件的方法无济于事:
that.player.onprogress = function(e){
console.log('progressEvent heard');
};
that.player.addEventListener('progress',progressHandler, false)
function progressHandler(e){
console.log('progressEvent heard');
};
这些都没有触发我的控制台消息.我的音频标签声明如下:
<audio style="width:0;height:0;"></audio>
我在这做错了什么？
更新:我使用wowzamediaserver来处理http流.我不知道这是否与它有任何关系.
另一个更新:我意识到我的音频标签中没有源,因为我使用jquery动态设置它,如下所示:
$('audio').attr('src','http://my.wowza.server:1935/myStreamingApp/_definst_/mp3:path/to/my/track/audio.mp3/playlist.m3u8');
再次,我没有回放问题,所以这不应该对我的问题有任何影响,但我只想尽可能地给你们一个图片.
我不确定这个活动目前的实现情况如何progress,但几个月前我在制作一个HTML5音频播放器时,我记得我无法在Safari或Chrome中触发它.我最后使用了计时器.可能没有什么你想不通的,但这是一个简化版本:
剧本:
$(document).ready(function(){
audio = $('body').find("audio").get(0);
});
function play() {
audio.play();
int = window.setInterval(updateProgress, 30);
}
function pause() {
audio.pause();
window.clearInterval(int);
}
function updateProgress() {
progress_seconds = Math.ceil(audio.currentTime);
progress_percent = Math.ceil(audio.currentTime / audio.duration * 100);
$('#progress_seconds').html('Seconds: ' + progress_seconds);
$('#progress_percent').html('Percent: ' + progress_percent);
};
HTML:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="so.js"></script>
<title></title>
</head>
<body>
<audio>
<source src="audio.mp3" type="audio/mp3">
</audio>
<a id="play" href="#" onclick="play();">Play</a>
<a id="pause" href="#" onclick="pause();">Pause</a>
<span id="progress_seconds">_</span>
<span id="progress_percent">_</span>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
6862 次 |
| 最近记录： |