HTML5 音频事件“进度"未触发 [英] HTML5 audio event 'progress' not firing

问题描述

我正在构建一个 a/v html5 流网络应用程序.这个问题涉及项目的音频部分，但我确信当我开始处理视频部分时，我会遇到类似的情况.我的目标设备是 iPad 的 safari 浏览器(因此我必须这样做 html5).播放工作正常，但我有一个加载栏，需要反映已加载多少曲目.遵循 w3 规范，我尝试使用 jQuery 通过以下方式实现:

I am building an a/v html5 streaming web app. This question pretains to the audio portion of the project, but i'm sure i will run into a similar situation when i get started on the video portion. My target device is the iPad's safari browser (hence why i have to do this html5). Playback works fine, but i have a loading bar which needs to reflect how much of the track has been loaded. Following the w3 spec, i tried to implement this the following way using 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' 事件的单独函数，它们遵循类似的格式，并且按预期触发.我尝试了其他捕获事件的方法无济于事:

This did not work. 'that.player.buffered' returns a TimeRanges object, and TimeRanges have a method 'end(index)' which returns the playback position of end of the buffer in seconds for the TimeRange specified by 'index.' TimeRanges also have a .length property which tells you how many TimeRanges are encapsulated by the object. When i tried to log that property i found that TimeRanges.length = 0, meaning no TimeRanges are passed back. Also when i threw logging statements into the bound function, i found that the 'progress' event was never fired. I have separate functions for the 'loadedmetata' and 'timeupdate' events which follow a similar format, and those fire off as expected. I tried other methods for capturing events to no avail:

that.player.onprogress = function(e){
     console.log('progressEvent heard');
};

that.player.addEventListener('progress',progressHandler, false)
function progressHandler(e){
    console.log('progressEvent heard');
};

这些都没有触发我的控制台消息.我的音频标签声明如下:

Neither of these triggered my console message. My audio tag declaration is as follows:

<audio style="width:0;height:0;"></audio>

我在这里做错了什么?

更新:我使用 wowzamediaserver 来处理 http 流.我不知道这是否与它有关.

UPDATE: I am using wowzamediaserver to handle the http streaming. I dont know if that could have anything to do with it.

另一个更新:我意识到我的音频标签中没有源，那是因为我使用 jquery 动态设置它，如下:

YET ANOTHER UPDATE: I realize i do not have a source in my audio tag, that is because i set it dynamically using jquery, as follows:

$('audio').attr('src','http://my.wowza.server:1935/myStreamingApp/_definst_/mp3:path/to/my/track/audio.mp3/playlist.m3u8');

再说一次，我没有播放问题，所以这对我的问题没有任何影响，但我只想给你们提供尽可能清晰的图片.

again i am not having playback issues so this shouldn't have any bearing on my problem, but i just want to give you guys as clear of a picture as possible.

推荐答案

HTML5 规范仍处于开发阶段，因此支持它的浏览器基本上符合尚未最终确定的规范.因此，我不希望他们的 HTML5 功能能够完全发挥作用...

The HTML5 specification is still a draft under development so browsers that support it are essentially conforming to a yet-to-be-finalized spec. As such I wouldn't expect their HTML5 features to be fully functional...

这篇关于HTML5 音频事件“进度"未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！