![cueChange]( "cueChange")
本文介绍了HTML5< audio> textTrack.kind =字幕cueChange事件在FireFox中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 此问题不再存在FireFox，cuechange现在可以正常工作。嵌入式base64图像也会渲染。 This issue no longer existing FireFox, cuechange now works. Embedded base64 images also render.原始代码是一个简单的实现MP3播放器，带有使用HTML5的字幕< AUDIO> 和几行JavaScript。 The original code is a simple implementation of am MP3 player with captioning using HTML5 <AUDIO> and a few lines of JavaScript.示例音频播放器HTML有一个带有Base64嵌入图像的.VTT字幕文件。 The example Audio Player HTML has a .VTT subtitle file with embedded images using Base64. 我使用的是HTML5 < audio> 播放器，其中包含VTT字幕< track> I am using the HTML5 <audio> Player with a VTT subtitle <track> 播放器和歌词VTT字幕（带图片）适用于Google Chrome版本35. 点击此处：链接到可在 Google Chrome中运行的html页面，但不能使用FireFox 现在上面的链接适用于Firefox，解决方法如下。 Click Here for: Link to the html page that works in Google Chrome but not FireFoxNow the above link works in Firefox with workaround below. FireFox版本35可以播放mp3，但VTT字幕无法正常工作。 onCueChange和cueChange事件都可以在Chrome中运行> onCueChange和cueChange事件在FireFox中都不起作用 The onCueChange and cueChange events both work in ChromeNeither onCueChange nor cueChange events work in FireFox 嵌入在H中的OnCueChange TML <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 How it worksWhen the VTT time changes the audio.track generates a cueChange Event.In the below VTT cues (2 of 25) the cueChange Event should fire at 00:00:00.001 and 00:00:04.200When the event fires, the script then reads the activeCues[0].textThe activeCues.text is displayed in the <div id="lyrics> innerHTML WEBVTT 00:00:00.001 --> 00:00:04.000Seasons in the SunTerry Jacks00:00:04.200 --> 00:00:20.000Goodbye to you, my trusted friendWe've known each other since we were nine or tenTogether we climbed hills and trees 点击此处获取完整链接.vtt 除了歌词h之外，这个.vtt as embedded base64 images This .vtt in addition to the lyrics has embedded base64 images注意：VTT必须提供HTTP头MIME类型 Content-Type：text / vtt NOTE: VTT must be served with an HTTP header MIME Type of Content-Type:text/vtt 我已通过Firebug确认以下内容： VTT文件加载时没有错误。 acvtiveCues具有正确的长度和文本。 25来自VTT文件的提示已加载且正确 textTrack模式为显示 The VTT file loads with out Error.The acvtiveCues has correct length and text.The 25 cues from the VTT file are loaded and correctThe textTrack mode is "showing" 使用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发布解决方案。 更新：不会检查是否适用于MS垃圾。 The text captions work in MS Edge, but does not render the Base64 Images**Code does not work in IE 11 I never tried to get it running in IE as I would never use a MS product unless absolutely necessary and this project is only for myself. I may in the future work on IE or maybe someone else posted a solution for IE.UPDATE: Not going to check if fit works with MS crap.我添加了一个JS Timer来每隔500毫秒调用cueChange（）I added a JS Timer to call cueChange() every 500 millisecondsvar nIntervId=window.setInterval(function(){cueChange()},500);我删除了在Chrome中有效的内容：I removed this which worked in Chrome:track.addEventListener("cuechange", cueChange, false); 新更新代码（更新：不再需要） New Updated Code (UPDATE: no longer needed)<!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 （截至2015年5月的v38.0）。但是，您通常可以使用 video.ontimeupdate 来实现几乎完全相同的事情，例如：Firefox still (!) doesn't support oncuechange (as of v38.0, May 2015). However, you can usually use video.ontimeupdate to achieve almost exactly the same thing, e.g.: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() { ... });} 这篇关于HTML5< audio> textTrack.kind =字幕cueChange事件在FireFox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-29 12:13