Undertekster med javascript
Undertekster til video
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
<div id="afspiller1">
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.srt.js"></script>
<video id="videoafspiller1" width="360" height="240" controls preload="auto">
<source src="images/buyascooter.ogv" type="video/ogg">
<source src="images/buyascooter.webm" type="video/webm">
<source src="images/buyascooter.mp4" type="video/mp4">
Browseren understøtter ikke video
</video>
<script type="text/javascript" src="undertekster.js"></script>
<div id="undertekst1" class="srt" data-video="videoafspiller1" data-srt="images/buyascooter.srt"></div>
</div>
#afspiller {
position: relative;
}
#undertekst1 {
position: absolute;
bottom: 35px;
left: 30px;
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 relative positioneret div og derefter positionere tekstafspillefunktionen absolute, kan teksten vises foran billedet. Ellers ville teksten blive vist under billedet og 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:
00:00:00,500 --> 00:00:08,000
Hello my name is Ervin Zhismen
This is my grandson Murry
2
00:00:08,000 --> 00:00:11,500
And today we are going
to go buy a scooter Heh
3
00:00:12,200 --> 00:00:16,000
Wow what a lovely place
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.
