Geek Answers Handbook

Show subtitles outside the game

I want the subtitles to be displayed outside of jwplayer . Can we have a separate unit in the game shell and have a separate place for subtitles? I do not want the subtitles to appear in the video, but we want the subtitles to be in a separate place outside the player. Is this possible with JWplayer? (or any player)

I will use JWplayer for this, so please tell me the answers given this is urgent. I will really be grateful if there is any code or logic or something else although I use JWplayer, but any help will be really noticeable.

+6
source share
3 answers

Let's move on to the example on this page . Subtitles are added to their own div, which has the .videosubbar class. So you can just add your own style for this.

So, for the example above, I added just the old style to move the subtitle box from the video frame. But I had to use !important to override the inline style added from the javascript file.

eg

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

Or, alternatively, you can edit the source for the plugin to configure where the subtitles will come in first.

Go from this js file.

The positioning element is added from lines 92 - 104, which is lower.

 $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 another link that you sent me, this is the same method as above, but between different plugins the id and the class of subtitle containers will obviously differ. In this other example, the container class is .mejs-captions-layer .

I suggest using FireBug or another developer tool to check the subtitle container and move it as you wish.

+4
source

hello thanks to Ethan and vletech who helped me solve the problem I am adding my code to help the community

I just override inline CSS using !important

for better understanding, I add both division and signature class name

/ 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, which I am just starting here in css, so that if the code is exceeded it breaks or you cannot see the signature where you want them to be seen ... don’t worry;) using firebug or a verification element you can easily find the right position for jwcaptions

0
source

I recently found a better approach for this, we can use jquery webvtt to parse the webvtt file and show it in our 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)); })
0
source

More articles:


All Articles