Mis*_*ood 11 javascript audio firefox html5
此问题不再存在FireFox,cuechange现在可以正常工作.嵌入式base64图像也会渲染.
原始代码是一个简单的实现MP3播放器,带有使用HTML5 <AUDIO>和几行JavaScript的字幕.
示例音频播放器HTML具有.VTT字幕文件,其中包含使用Base64的嵌入图像.
我正在使用带有VTT字幕的HTML5 <audio>播放器<track>
播放器和歌词VTT字幕(带图片)适用于Google Chrome版本35.
点击这里:链接到适用于谷歌浏览器但不适用于FireFox的html页面
现在上面的链接适用于Firefox,下面有解决方法.
FireFox版本35可以播放mp3,但VTT字幕无法正常工作.
onCueChange和cueChange事件都可以在Chrome中
运行在FireCox中,onCueChange和cueChange事件都不起作用
OnCueChange嵌入在HTML中
<track id="trk" kind="subtitles" onCueChange="cueChange()" srclang="en" src="SeasonsInTheSun.vtt" default />
cueChange事件监听器
track.addEventListener("cuechange", cueChange, false);
工作原理
当VTT时间改变时,audio.track会生成cueChange事件.
在下面的VTT线索(2 25)的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
除了歌词之外,这个.vtt还嵌入了base64图像
注意:必须使用HTTP头MIME类型为VTT提供服务 Content-Type:text/vtt
我通过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 45中工作(2016年1月26日)
更新:cueChange现在在FIREFOX工作这个FIX 不再
需要FIREFOX
文本标题在MS Edge中工作,但不呈现Base64图像**
代码在IE 11中不起作用
我从未试图让它在IE中运行,因为我绝不会使用MS产品,除非绝对必要且此项目仅适用于我.我将来可能会在IE上工作或者其他人为IE发布解决方案.
更新:不会检查是否适合MS垃圾.
我添加了一个JS Timer来每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（截至 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() { ... });
}
| 归档时间： |
|
| 查看次数： |
4450 次 |
| 最近记录： |