Undertekster med javascript

        

Undertekster til audio

Indtil track bliver understøttet i alle browsere, er der en alternativ mulighed for at lave undertekster til en video. Men selv om javascriptet virker i alle versioner af (x)html, er du af hensyn til elementet video alligevel nødt til at lave det i html5

html:

<div id="afspiller2">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>

<audio controls="controls">
  <source src="images/lollipop.ogg" type="audio/ogg">
  <source src="images/lollipop.mp3" type="audio/mpeg">
  <source src="images/lollipop.wav" type="audio/wave">
</audio>

<script type="text/javascript" src="undertekster.js"></script>
<div id="undertekst1" class="srt" data-video="videoafspiller1" data-srt="images/lollipop.srt"></div>

</div>
css:

.afspiller {
height: 100px;
}

#undertekst2 {
color: #fff;
background-color: #333;
padding: 0 5px 0 5px;
}

Vil se sådan ud i din browser - ved at lægge det hele i en div med fast højde undgås det at den efterfølgende del af siden vil hoppe op og ned:

Hent de anvente javascripts - der skal ikke ændres noget i dem:


Kildefilen til en .srt subtitle-fil adskiller sig kun meget lidt fra en .vtt-fil:

1
1a
00:00:00,500 --> 00:00:02,500
My boy Lollipop

2
00:00:04,600 --> 00:00:08,000
you made my heart go giddy up

3
00:00:08,000 --> 00:00:11,500
You are as sweet as candy,

Læg mærke til, at .srt ikke indledes med en WEBSRT FILE og at der bruges komma i stedet for punktum før sekund-decimalerne! I øvrigt er tidsformateringen den samme som ved .vtt

Det er vigtigt, at du gemmer filen undertekst.srt i tegnkodning utf-8, da det ellers ikke virker.

Valid HTML5 og CSS / Copyright © Hjemmesideskolen juli 2012
Hjemmesideskolen
Du er her: Forsiden - html - elementer - Undertekster med javascript
sidens top
Brugere lige nu: 1
Home Mail