logo标签列表

HTML5音频事件“progress”未触发

jqueryhtmlipadeventsaudio-streaming
6
我正在构建一个音视频HTML5流媒体Web应用程序。这个问题涉及到项目的音频部分，但我相信当我开始处理视频部分时也会遇到类似的情况。我的目标设备是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' 指定的 TimeRanges 对象中缓冲区结尾播放位置的秒数。TimeRanges 还有一个 .length 属性，告诉你对象中有多少个 TimeRanges 封装。当我尝试记录该属性时，发现 TimeRanges.length = 0，表示未传回 TimeRanges。此外，当我在绑定的函数中添加日志语句时，发现 'progress' 事件从未触发。我为 'loadedmetadata' 和 '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');

再次强调，我没有播放问题，所以这与我的问题无关，但是我想尽可能清楚地向你们描述情况。

我在将近两年后遇到了同样的问题 - 我相信这是由于使用playlist.m3u8导致的，但我还没有找到解决方法。你有什么好运气吗？ - GDP
3个回答
7

我不确定当前实现的 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>
0

iOS 8.1版本后，许多情况下进度事件无法正常工作。根据苹果的文档：

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

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

Ref: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

0

HTML5规范仍在开发中，因此支持它的浏览器实际上是符合尚未最终确定的规范。因此，我不希望他们的HTML5功能完全可用...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接