I used a combination of several modules. You may be able to substitute other modules (video, for instance) to fit your needs. These worked for me. You may be able to make this work in Drupal 6; all three modules are available for D6 also.
Create a content type (see Figures 1a and 1b. These are included in the PDF in the attached resource pack) to hold your videos and captions/subtitles. Mine is called Movie.
a. Add a File field to hold your movie. Mine is called Movie. The widget will default to File. Save this field.
b. Use the default Field Settings when prompted. Click Save Field Settings.
c. On the field Edit page, specify the types of video you will be using in the Allowed file extensions box. I added mp4, mov, flv, f4v, ogg, 3gp, avi; these seem to cover most HTML5 use scenarios.
d. Click the Manage Display tab. For the Movie field, select <Hidden> for the Label. For Format, select Video.js : HTML5 Video Player.
e. Now add a new text field to the Movie content type, labeled Time 1. This will hold the time for the first subtitle. This is just a plain text field, with all of the default settings. When you have saved this, click the Manage Display tab. Since the time field will only be used by Video.js to add the subtitles at the appropriate time, select <Hidden> for Format.
f. Repeat the above step (e), for as many subtitles as you anticipate using. I will use no more than 25. Note: When adding the text field, you may notice you have the option to add an unlimited number of values. Do not do this. We need to create distinct fields so we can order them and reference them separately through a view, later.
g. Add another text field to the Movie content type, with the label Text 1. This will hold the text for the first subtitle. Set the length to the maximum number of characters you anticipate using. Mine is set to 510. Select Filtered text. You may need to configure and enable the Full HTML setting under Configuration > Text Formats. Be sure to include here any HTML elements you want to use in your subtitles, <em> or <strong>, for instance. You can leave the Manage Display settings set to default values. I grouped my text fields here under a collapsing fieldset called View Procedure Text. This hides the subtitles on the node view page but allows the user to optionally view them if they want to see all of the subtitles listed in order. You can hide these fields on the page using the content type display settings if you like, but they will still output as subtitles.
h. Repeat the above step (g), for as many subtitles as you anticipate using. I will use no more than 25. When adding the text field, you may notice you have the option to add an unlimited number of values. Do not do this. We need to create distinct fields so we can order them and reference them separately through a view, discussed later.
i. Add any other optional fields you would like to display on the same page as your video content.
Create a content type called Content Container (see Figure 1c). This is not strictly necessary for creating movies with subtitles, but in my case, we may have many instances where we refer to a single movie and its associated content again and again, in different contexts. We do this by using a node or entity reference field where we reuse the Movie content output through a different content type page (here called Content Container). This means there is only one source movie node to keep track of. Note: I am explaining this here because I refer to Content Container in code in my videojs.tpl.php override later. The code will still work on the Movie content type even if you don’t create the Content Container content type, however.
a. Add an entity reference field to the content type called Media Reference. It should be a select list. For Entity Selection, choose Simple. Choose Movie as the type of content to reference.