UPDATE:
В этой проблеме больше не существует FireFox, теперь работает cuechange. Встроенные изображения base64 также отображают.
Оригинальный код - простая реализация MP3-плеера с субтитрами с использованием HTML5 <AUDIO> и нескольких строк JavaScript.
В примере Audio Player HTML есть файл субтитров .VTT со встроенными изображениями с использованием Base64.
ОРИГИНАЛЬНАЯ ПОЧТА НАЧИНАЕТСЯ ЗДЕСЬ
Я использую HTML5 <AUDIO> Player с субтитрами VTT <track>
Плеер и тексты субтитров VTT (с изображениями) отлично работают с Google Chrome версии 35.
Нажмите здесь, чтобы: Ссылка на страницу html, которая работает в
Google Chrome, но не FireFox
Теперь эта ссылка работает в Firefox с обходным решением ниже.
FireFox Version 35 может воспроизводить mp3, но субтитры VTT работают неправильно.
События onCueChange и cueChange работают как в Chrome
Ни OnCueChange, ни события cueChange не работают в FireFox
Новое обновление, добавленное ниже с помощью простого обходного пути (1/26/16)
OnCueChange встроен в HTML
<track id="trk" kind="subtitles" onCueChange="cueChange()" srclang="en" src="SeasonsInTheSun.vtt" default />
cueChange Event Listener
track.addEventListener("cuechange", cueChange, false);
Как это работает?
Когда время VTT изменяется, audio.track генерирует событие cueChange.
В нижеуказанных речах VTT (2 из 25) событие cueChange должно срабатывать при 00:00:00.001 и 00:00:04.200
Когда событие срабатывает, script затем читает 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
Этот .vtt в дополнение к лирике имеет встроенные изображения base64
ПРИМЕЧАНИЕ. VTT должен обслуживаться с HTTP-заголовком. MIME-тип Content-Type:text/vtt
Я подтвердил через Firebug следующее:
- Файл VTT загружается с ошибкой.
- AcvtiveCues имеет правильную длину и текст.
- Будут загружены 25 реплик из файла VTT и правильные
- Режим textTrack "показывает"
Полный HTML-код с JavaScript
<!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 (26 января 2016 г.)
UPDATE: cueChange СЕЙЧАС РАБОТАЕТ В FIREFOX
ЭТО НЕ ИМЕЕТ НИКАКОГО НЕОБХОДИМОГО ДЛЯ ПОЖАРНОЙ БЕЗОПАСНОСТИ
Текстовые подписи работают в MS Edge, но не отображают изображения Base64 **
Код не работает в IE 11
Я никогда не пытался запустить его в IE, поскольку я никогда не буду использовать продукт MS, если это абсолютно необходимо, и этот проект предназначен только для меня. Я могу в будущем работать над IE или, возможно, кто-то еще разместил решение для IE.
UPDATE: Не собирается проверять, подходит ли работа с MS-дерьмом.
Я добавил таймер JS для вызова cueChange() каждые 500 миллисекунд
var nIntervId=window.setInterval(function(){cueChange()},500);
Я удалил это, что работало в Chrome:
track.addEventListener("cuechange", cueChange, false);
Новый обновленный код (UPDATE: больше не требуется)
<!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>