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

html:

<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>
css:

#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:

1
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.

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