更新:
FireFox 不再存在此问题，cuechange 现在有效。嵌入的 base64 图像也呈现。
原始代码是 AM MP3 播放器的简单实现，带有使用 HTML5 的字幕 <AUDIO>和几行 JavaScript。
示例音频播放器 HTML 有一个 .VTT 字幕文件，其中嵌入了使用 Base64 的图像。
原始帖子从这里开始
我正在使用 HTML5 <audio>带有 VTT 字幕的播放器 <track>
播放器和歌词 VTT 字幕(带有图像)在 Google Chrome 版本 35 上运行良好。
Click Here for: Link to the html page that works in
Google Chrome but not FireFox
现在上面的链接可以在 Firefox 中使用，解决方法如下。
FireFox Version 35 可以播放 mp3，但 VTT 字幕无法正常播放。
onCueChange 和 cueChange 事件都适用于 Chrome
onCueChange 和 cueChange 事件在 FireFox 中都不起作用
在下方添加了具有简单解决方法的新更新 (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].text
activeCues.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 确认以下内容:
- VTT 文件加载时没有错误。
- actvtiveCues 具有正确的长度和文本。
- VTT 文件中的 25 个提示已加载并正确
- textTrack 模式是“显示”
带有 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
仍然无法在 FireFox 45 中工作(2016 年 1 月 26 日)
更新:cueChange 现在可以在 FIREFOX 中运行
Firefox 不再需要此修复
文本标题在 MS Edge 中工作，但不呈现 Base64 图像**
代码在 IE 11 中不起作用
我从来没有尝试让它在 IE 中运行，因为除非绝对必要，否则我永远不会使用 MS 产品，而且这个项目只适合我自己。我将来可能会在 IE 上工作，或者其他人可能会发布 IE 的解决方案。
更新:不会检查 fit 是否适用于 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/