Question

我正在构建一个a / 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');

我再也没有播放问题所以这不应该对我的问题产生任何影响，但我只是想尽可能地让你们看清楚。

Answer 1

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

Answer 2

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

Answer 3

从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音频事件“进度”未触发

3 个答案: