更新:
此问题不再存在于FireFox，现在可以使用cuechange。嵌入式base64图像也会渲染。
原始代码是AM3播放器的简单实现，带有使用HTML5 <AUDIO>和几行JavaScript的字幕。
示例音频播放器HTML具有一个.VTT字幕文件，该文件带有使用Base64嵌入的图像。
原始帖子从这里开始
我正在将HTML5 <audio>播放器与VTT字幕<track>一起使用
播放器和歌词VTT字幕(带有图像)在Google Chrome版本35中可以正常使用。
Click Here for: Link to the html page that works inGoogle Chrome but not FireFox
现在，上面的链接在Firefox中可以使用，下面是解决方法。
FireFox版本35可以播放mp3，但VTT字幕无法正常工作。
onCueChange和cueChange事件都可在Chrome中使用
在FireFox中，onCueChange和cueChange事件均不起作用
下面通过简单的解决方法(1/26/16)添加了新更新
嵌入在HTML中的 OnCueChange
<track id="trk" kind="subtitles" onCueChange="cueChange()" srclang="en" src="SeasonsInTheSun.vtt" default />
cueChange事件监听器
track.addEventListener("cuechange", cueChange, false);
这个怎么运作
当VTT时间更改时，audio.track会生成一个cueChange事件。
在以下VTT提示(25个中的2个)中，cueChange事件应在
00:00:00.001和00:00:04.200处触发当事件触发时，脚本然后读取
activeCues[0].textactiveCues.text显示在<div id="lyrics> innerHTML中WEBVTT
00:00:00.001 --> 00:00:04.000
Seasons in the Sun
Terry Jacks
00:00:04.200 --> 00:00:20.000
Goodbye to you, my trusted friend
We've known each other since we were nine or ten
Together we climbed hills and trees
Click Here for Link to full .vtt
该.vtt除歌词外还嵌入了base64图像
注意:VTT必须与
Content-Type:text/vtt的HTTP header MIME类型一起提供我已经通过Firebug确认了以下内容:
带有JavaScript的完整HTML
<!DOCTYPE html>
<head><title>Seasons in the Sun</title>
<style type="text/css">
html,body{padding:0;margin:0;width:100%;min-height:100%;background-color:#000;color:#f0f;}
#lyrics{margin-left:3em;font: 700 2.3em arial,sans-serif;color:#0ff;text-align:center;}
</style></head><body>
<audio id="audio" preload="auto" controls>
<source src="http://islmpeg.s3.amazonaws.com/mp3/TerryJacks-SeasonsInTheSun.mp3" type="audio/mpeg">
<track id="trk" kind="subtitles" srclang="en" src="http://islmpeg.s3.amazonaws.com/mp3/SeasonsInTheSun.vtt" default />
</audio>
<br/><div id="lyrics"></div><br/>
<script type="text/javascript">
//<![CDATA[
var lyrics = document.getElementById('lyrics');
var audio = document.getElementById('audio');
var track = document.getElementById('trk');
var textTrack = track.track;
track.addEventListener("cuechange", cueChange, false);
function init(){audio.volume = .3;audio.play();}
function cueChange(){
var cues = textTrack.activeCues;
if (cues.length > 0){
lyrics.innerHTML = cues[0].text.replace(/\n/g, '<br>');}}
window.onload = init;
//]]>
</script></body></html>
在FireFox和Chrome中更新Work AroundWorks
仍无法在FireFox 45中使用(2016年1月26日)
更新:cueChange现在可以在FIREFOX中使用
不再需要此修复程序
文字标题可在MS Edge中使用，但不会呈现Base64图像**
代码在IE 11中不起作用
我从未尝试过使其在IE中运行，因为除非绝对必要，否则我绝不会使用MS产品，并且该项目仅适合我自己。我将来可能会在IE上工作，或者可能有人为IE发布了解决方案。
更新:不会检查适合与MS废话。
我添加了一个JS计时器，每500毫秒调用一次cueChange()
var nIntervId=window.setInterval(function(){cueChange()},500);
我删除了在Chrome浏览器中正常工作的代码:
track.addEventListener("cuechange", cueChange, false);
新的更新代码(更新:不再需要)
<!DOCTYPE html>
<head><title>Seasons In The Sun</title>
<style type="text/css">
html,body{padding:0;margin:0;width:100%;min-height:100%;background-color:#000;color:#f0f;}
#lyrics{margin-left:3em;font: 700 2.3em Arial,sans-serif;color:#0ff;text-align:center;}
#html5{display:none;}
</style></head><body><div><div id="html5"><h2>You Browser Does not support Audio Captions<br/>You will not see the lyrics.</h2></div>
<audio id="audio" preload="auto" controls>
<source src="http://islmpeg.s3.amazonaws.com/mp3/TerryJacks-SeasonsInTheSun.mp3" type="audio/mpeg">
<track id="trk" kind="subtitles" srclang="en" src="SeasonsInTheSun.vtt" default />
</audio>
<br/><div id="lyrics"></div><br/>
<script type="text/javascript">
//<![CDATA[
var lyrics = document.getElementById('lyrics');
var audio = document.getElementById('audio');
var track = document.getElementById('trk');
var textTrack = track.track;
//track.addEventListener("cuechange", cueChange, false); // oncuechange
var nIntervId=window.setInterval(function(){cueChange()},500);
function init(){audio.volume = .3;audio.play();cueChange();}
function cueChange(){
var cues = textTrack.activeCues;
if (cues.length > 0){
lyrics.innerHTML = cues[0].text.replace(/\n/g, '<br>');
}
}
window.onload = init;
//]]>
</script><img width="1" height="1" src="pix.php?p=sits" alt="."/></body></html>
最佳答案
Firefox仍然(!)不支持oncuechange(截至v38.0，2015年5月)。但是，您通常可以使用video.ontimeupdate来实现几乎完全相同的操作，例如:
var videoElement = $("video")[0];
var textTrack = videoElement.textTracks[0];
if (textTrack.oncuechange !== undefined) {
$(textTrack).on("cuechange", function() { ... });
} else {
// some browsers don't support track.oncuechange, so...
$(videoElement).on("timeupdate", function() { ... });
}
关于javascript - HTML5 <audio> textTrack.kind = subtitles cueChange事件在FireFox中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28144668/