javascript - show subtitle outside of player - Stack Overflow

admin管理员组

文章数量:1401241

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.

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.

• javascript
• jquery
• jwplayer

Share Improve this question Follow edited Apr 14, 2013 at 10:04 Cory Kendall 7,32499 gold badges3838 silver badges6666 bronze badges asked Apr 14, 2013 at 9:55 HiteshHitesh 4,2981212 gold badges5252 silver badges8383 bronze badges 16

• I'm trying to locate a HTML5 example of the player with subtitles but I can only find Flash, do you have a link to one? – dev Commented Apr 14, 2013 at 10:14
• @vletech : it is quite easy you can easily google for "showing subtitle using track tag in html5"i hope this link – Hitesh Commented Apr 14, 2013 at 14:26
• @vletech : it is quite easy you can easily google for "showing subtitle using track tag in html5" and i hope this link helps html5rocks./en/tutorials/track/basics one more place where u can see this is mediaelementjs./examples/?name=translation but first go through how to install this player ..u just need to include js file for this for me i am using JWplayer because i wanted both html5 and flash and jwplayer seemed more promising....hope this helps – Hitesh Commented Apr 14, 2013 at 17:16
• @Cory kendeall : thanks for editing – Hitesh Commented Apr 14, 2013 at 17:17
• @vletech:::::one more link storiesinflight./js_videosub – Hitesh Commented Apr 14, 2013 at 17:18

 |  Show 11 more ments

3 Answers 3

Sorted by: Reset to default 4

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.

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

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

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));
})

本文标签： javascriptshow subtitle outside of playerStack Overflow