HTML5音频事件“进度”没有触发

问题描述：

我正在构建一个a/v html5流式web应用程序。这个问题存在于项目的音频部分，但我确定当我开始使用视频部分时，我会遇到类似的情况。我的目标设备是iPad的safari浏览器（因此为什么我必须这样做html5）。回放工作正常，但我有一个加载栏需要反映已加载多少轨道。遵循w3规范，我试图用jQuery实现以下方式：HTML5音频事件“进度”没有触发

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');

我再次没有播放问题，所以这不应该对我的问题有任何影响，但我只是想给你们尽可能清晰的图片。

我近2年后有同样的问题 - 我相信这是由于使用playlist.m3u8，但还没有找到办法解决它。还有什么运气？ – GDP

答

HTML5规范仍在开发中的草稿，浏览器支持它基本上符合尚未完成的规范。因此，我不希望他们的HTML5功能功能完全...

答

我不确定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>

答

从iOS 8.1开始，许多用例中的进度事件将不起作用。根据Apple的文档：

注意：在iPad上，Safari不会开始下载，直到用户单击海报或占位符。目前，以这种方式开始的下载不会发送进度事件。

我可以证实，javascript触发的播放不会触发进度事件。我尚未使用HTML5音频原生控件<audio controls></audio进行测试。

编号： https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

HTML5音频事件“进度”没有触发

相关推荐