javascript - show subtitle outside of player

Question

I want subtitles to be shown outside of jwplayer. Can we have a separate division in player skin and have separate place for subtitle? I don't want the subtitles to be shown in the video, but we want the subtitle in separate place in outside the player. Is it possible to do with JWplayer? (or any player)

I will be using JWplayer to do this so please tell the answers keeping that in mind it is urgent. I will really be thankful if there is any code or logic or anything though i am using JWplayer, but any help would be really appreciable.

Answer 1

Going from the example on this page. The subtitles are added to their own div that has the class of .videosubbar. So you can simply add your own styling for this.

So for the example above I added just plain old styling to move the subtitle box out of the video frame. But I had to use !important to override the inline styling that is added from the javascript file.

e.g

.videosubbar{
   bottom:-100px!important;
   // etc. 
}

Or alternatively you can edit the source for the plugin to adjust where the subtitles are aded in the first place.

Going from this JS file.

The positioning stylig is added from lines 92 - 104, which is below.

$VIDEOSUB(subcontainer).css({
   'position': 'absolute',
   'bottom': '34px',
   'width': (videowidth-50)+'px',
   'padding': '0 25px 0 25px',
   'textAlign': 'center',
   'backgroundColor': 'transparent',
   'color': '#ffffff',
   'fontFamily': 'Helvetica, Arial, sans-serif',
   'fontSize': fontsize+'px',
   'fontWeight': 'bold',
   'textShadow': '#000000 1px 1px 0px'
});

With the other link you sent me, it is the same method as above, but between different plugins the id's and class's of the subtitle containers will obviously differ. With this other example the class of the container is .mejs-captions-layer.

I suggest using fireBug or another developer tool to inspect the subtitle container and move it freely as you see fit.