Javascript HTML5<；音频>；textTrack.kind=字幕提示更改事件在FireFox中不起作用 更新：
这个问题不再存在于FireFox中，cuechange现在可以工作了。嵌入的base64图像也可以渲染。Javascript HTML5<；音频>；textTrack.kind=字幕提示更改事件在FireFox中不起作用 更新：,javascript,html,firefox,audio,Javascript,Html,Firefox,Audio,这个问题不再存在于FireFox中，cuechange现在可以工作了。嵌入的base64图像也可以渲染。 原始代码是一个简单的am MP3播放器实现，使用HTML5 现在，上面的链接在Firefox中可用，下面是解决方法。 FireFox版本35可以播放mp3，但VTT字幕无法正常工作。 <!DOCTYPE html> <head><title>Seasons in the Sun</title> <style type="text/css
原始代码是一个简单的am MP3播放器实现，使用HTML5
现在，上面的链接在Firefox中可用，下面是解决方法。
FireFox版本35可以播放mp3，但VTT字幕无法正常工作。
<!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>
onCueChange和cueChange事件都在Chrome中工作
onCueChange和cueChange事件在FireFox中都不起作用
下面添加了新的更新和简单的解决方法（1/26/16）
onceChange嵌入到HTML中
<track id="trk" kind="subtitles" onCueChange="cueChange()" srclang="en" src="SeasonsInTheSun.vtt" default />
工作原理
当VTT时间更改时，audio.track将生成一个cueChange事件。
在以下VTT提示（25个中的2个）中，提示更改事件应在00:00:00.001
和00:00:04.200
当事件触发时，脚本将读取活动提示[0]。文本
activeCues.text
显示在Firefox中，仍然（！）不支持oncuechange
（从2015年5月v38.0起）。但是，您通常可以使用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() { ... });
}
截至2015年8月第39版，仍未修复。下面是我为检查activeCues列表的更改而制定的丑陋的解决方案。这是一个概念证明，现在我需要为正确支持onCueChange的浏览器重新编写代码，以便正确地进行回退
var v = document.getElementsByTagName('video')[0];
var t = v.textTracks;
var la = [];
for(l = 0; l < t.length; l++){
la[l] = '';
};
var onchangeTest = (function isEventSupported(eventName) {
var isSupported = ('oncuechange' in t[0]);
if (isSupported) {
return true;
} else {
return false;
};
})();
v.ontimeupdate = function(){
if(!onchangeTest){
var activeCues ="";
var delim ="";
for(i = 0; i < t.length; i++){
if(t[i].kind == 'captions' || t[i].kind == 'subtitles'){
delim = "<br />";
} else {
delim = "\n";
};
a = v[i].activeCues;
if(a){
var tt = '';
for(ii = 0; ii < a.length; ii++){
tt += a[ii].text + delim;
if(tt !== la[i]){
la[i] = tt;
console.log('tt: ' + tt + ' la[' + i + ']: ' + la[i]);
};
};
};
};
};
};
var v=document.getElementsByTagName（'video'）[0]；
var t=v.textTracks；
var la=[]；
对于（l=0；l”；
}否则{
delim=“\n”；
};
a=v[i]。活动提示；
如果（a）{
var tt=“”；
对于（ii=0；ii
现在，mozilla inbound中已经添加了补丁程序，用于启动媒体元素（现在可用于视频）。我现在将修复音频端，因为没有字幕窗口，所以无法启动
感谢您的回复！我认为最初的代码有一个输入错误。当我在FireFox和IE中测试它时，它都不起作用
有问题的路线是
a = v[i].activeCues;
它应该是
a = t[i].activeCues;
因为activeCues
是textTracks
对象的属性，而不是video
对象。经过这一改变，它的工作
我试图把这个帖子作为对他的帖子的回复，但系统不让我这么做。所以添加它作为答案。这是ff@RachelGallen中的一个已知错误谢谢，我在Bugzilla中搜索音频，只找到了x86 OSX的一个错误。我从未想过要搜索WEBVTT。关于
的文档非常少，我能找到的几乎所有字幕示例都使用
，这非常简单，因为字幕div是内置的。一旦你知道怎么做，
就很简单了。不客气。很高兴知道你的代码没有问题！！！：）你有没有用Chrome播放mp3。这有点酷，因为我使用base64编码嵌入了jpeg图像。这是一部既有趣又悲伤的作品。我做了。是的，它很酷，我真的很喜欢那首歌！仍然没有实施，没有任何进展：（我将在下周为这个bug在bountysource上投入一些资金。通过简单的解决方法为问题添加了新的更新。这是一种痛苦，无法对更正进行评论。但是，这一限制也有助于抑制垃圾邮件和垃圾。赢得一些代表来克服它！同时，只对答案使用答案。谢谢@Mogsdad，我很感激。我想我的贡献是为了省去一些人弄明白为什么代码不起作用的麻烦。你知道，你可以对这篇文章做一个建议性的编辑。（批准后，+2代表！）在总结中，请明确更改的原因；审阅者通常会将对代码的更改视为故意破坏而丢弃。这并不能回答问题。一旦您有足够的代码，您就可以这样做；相反，.-谢谢@Mosgad。我也尝试过对帖子进行建议性编辑。但由于我的更改低于最低要求c角色（我相信6），它不让我保存，认为我的编辑是无关紧要的。无论如何，伙计们，谢谢你们澄清了这个过程（谢谢@gonz），我想我会等着获得重复。我只是想马上帮助别人！很好：）
<!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>
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() { ... });
}
var v = document.getElementsByTagName('video')[0];
var t = v.textTracks;
var la = [];
for(l = 0; l < t.length; l++){
la[l] = '';
};
var onchangeTest = (function isEventSupported(eventName) {
var isSupported = ('oncuechange' in t[0]);
if (isSupported) {
return true;
} else {
return false;
};
})();
v.ontimeupdate = function(){
if(!onchangeTest){
var activeCues ="";
var delim ="";
for(i = 0; i < t.length; i++){
if(t[i].kind == 'captions' || t[i].kind == 'subtitles'){
delim = "<br />";
} else {
delim = "\n";
};
a = v[i].activeCues;
if(a){
var tt = '';
for(ii = 0; ii < a.length; ii++){
tt += a[ii].text + delim;
if(tt !== la[i]){
la[i] = tt;
console.log('tt: ' + tt + ' la[' + i + ']: ' + la[i]);
};
};
};
};
};
};
a = v[i].activeCues;
a = t[i].activeCues;