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.

Answer 2

hi thanks to Ethan and vletech who helped me to solve the issue i am adding my code so that it will help the community

i am just overriding the inline CSS using !important

for better understanding i am adding both division and class name of caption division

/ID/

#player_caption div{width:100% !important;text-align:center !important;left:0 !important;}

/CLASS/

.jwcaptions{    
position:absolute;bottom:0px;border:solid 2px #333;
-moz-border-radius: 15px;opacity:0.7;width:100% !important;bottom:0%
}

you can have your own css i am just beginner here in css so in case above code breaks or you are not able to see caption in place where you want them to see ... dont worry ;) using firebug or inspect element you can easily find the right position for the jwcaptions

Answer 3

Recently I have found better approach for this, we can use jquery webvtt for parsing webvtt file and show it in own div. ( Jquery Webvtt )

jwplayer('video_id').onTime(function(){
                var play_position = jwplayer("video_id").getPosition();
                var hr = parseInt(( play_position / 3600 ) % 24);
                hr = checkTime(hr);
                var min = parseInt(( play_position / 60 ) % 60);
                min = checkTime(min);
                var sec = parseInt((play_position % 60));
                sec = checkTime(sec);
                var hrTotal = parseInt(( videoLength_s / 3600 ) % 24);
                hrTotal = checkTime(hrTotal);
                var minTotal = parseInt(( videoLength_s / 60 ) % 60);
                minTotal = checkTime(minTotal);
                var secTotal = parseInt((videoLength_s % 60));
                secTotal = checkTime(secTotal);
                $('#ci_current_position_'+id).text(hr+':'+min+':'+sec);
                   $('#ci_video_time_'+id).text(hrTotal+':'+minTotal+':'+secTotal);
var position = hr+":"+min+":"+sec+".000";
$('#ci_caption_'+id).html($("#en_"+id).webVtt(position));
})