Displaying subtitles using javascript

Question

I'm currently using jquery.srt.js to display subtitles for some videos that I have.

What I am trying to accomplish is displaying the whole text file of the subtitles in a webpage.

This is what I have in my html document. How can I get the 'data-srt' (a local file) contents?
Thanks

<div id='srt'
     class="srt"
     data-video="video"
     data-srt="sample.srt" />

</div>

EDIT

    $(function()
    {
        $.get($("#srt").data("srt"), function(text) {
            alert(text);
        });
    });

</script>

I tried the above editied version but instead of displaying the subtitle text it gives me:
[object XMLDocument]

score 1 · Answer 1 · answered Jul 26 '12 at 23:34

1

I'm assuming sample.srt is a text file located on the webserver? You can try performing an ajax call to the text file and using javascript to display the response text to an html element. Use jQuery to perform that AJAX call:

$.ajax(
{
   url: $("#srt").attr("data-srt"),
   success: function(responseText)
   {
       alert(responseText);
   }
});

answered Jul 26 '12 at 23:34

AceCorban

2,023
1
15
15

The text file is actually local. I'm just experimenting with a webpage and how I want it to display text. – user1460015 Jul 27 '12 at 01:28
But if you choose this method, then the .srt file will be on the webserver, right? What I meant is that you won't try to access a local file that the user has. Both this suggestion and the much more concise version offered by say2joe should work. It is interesting that you are getting an object reference and not the actual text. Does the file exist? Is it located in the same directory as the html file with this code? – AceCorban Jul 27 '12 at 15:51
You are right. In the future I will not be accessing local files. The file does exist and its right next to the .html file in the same directory. If you follow the link above 'jquery.srt.js' I am using the video and srt file as an example. You can see for yourself. Thanks – user1460015 Jul 27 '12 at 18:49
Pretty nifty plugin. I am still unsure why you would be getting an object reference instead of the actual text. I tried it with various file formats and am still getting the text as it is written on the file. Which browser are you using? Have you tried running this in other browsers? – AceCorban Jul 27 '12 at 21:04
I'm using firefox 14 and chrome 20.0.1132.57. Chrome won't allow access to local files so it won't work. I'll setup an apache server and see if it'll work from there – user1460015 Jul 28 '12 at 17:13
I got the apache server up and running. Copy/paste the needed files. Work fine now. That did the trick. Although I didn't use your code I didn't mark it as correct. But I would upvote you if I could. Thanks again! – user1460015 Jul 29 '12 at 14:56

score 0 · Accepted Answer · answered Jul 26 '12 at 23:36

0

I see you're using W3C DOM methods, but your file indicates you're using jQuery. So, the following is shorter using jQuery:

$.get($("#srt").data("srt"), function(text){
  alert(text); // Show the subtitles from the text file.
});

Enjoy!

answered Jul 26 '12 at 23:36

Joe Johnson

1,814
16
20

Thanks for the help. I tried the above and edited my question. How would I access the object XMLDocument to extract the whole .srt text? – user1460015 Jul 27 '12 at 01:27
The code above worked. I had to setup an apache server to get the results. Thanks – user1460015 Jul 29 '12 at 14:58

Displaying subtitles using javascript

2 Answers2