5

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.

Cory Kendall
  • 7,195
  • 8
  • 37
  • 64
Hitesh
  • 4,098
  • 11
  • 44
  • 82
  • 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 Apr 14 '13 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 Apr 14 '13 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 http://www.html5rocks.com/en/tutorials/track/basics/ one more place where u can see this is http://mediaelementjs.com/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 Apr 14 '13 at 17:16
  • @Cory kendeall : thanks for editing – Hitesh Apr 14 '13 at 17:17
  • @vletech:::::one more link http://www.storiesinflight.com/js_videosub/ – Hitesh Apr 14 '13 at 17:18
  • I think there might have been a bit of delay with your comments posting (2 hours) but please see my edits to my answer below – dev Apr 14 '13 at 18:25
  • I'm afraid we don't have something that does this out of the box, though. – emaxsaun Apr 15 '13 at 01:48
  • @EthanLongTail: but can we not develop own thing (plugin or addon )using your JS file can u tell me where to modify in JWplayer JS file to do this – Hitesh Apr 15 '13 at 05:55
  • Sorry, but we don't really provide support for JS Hackery to our our embedder for something like this. You would really need to do it through building a plugin , and / or our official APIs. – emaxsaun Apr 15 '13 at 19:15
  • @EthanLongTail: i understand that it is not allowed .... but how to achieve this in developing plugin .... i was trying for your helloworld plugin http://www.longtailvideo.com/support/jw5/31166/building-javascript-plugins but it doesnt seemed to show any reflection while i play the video can u help me in developing the java script plugin – Hitesh Apr 16 '13 at 12:00
  • @EthanLongTail: i can not find the hello world .... why is it not showing in player ... i tried the alert in hello.js file it works but i can not find the hello world where should i look – Hitesh Apr 16 '13 at 12:37
  • Provide an example please? – emaxsaun Apr 16 '13 at 16:36
  • http://www.longtailvideo.com/support/forums/jw-player/player-development-and-customization/30773/no-plugin-works/ can we not develop plugins in JWplayer vs 6 ???? @EthanLongTail than how am i supposed to do this `(function(jwplayer){ var template = function(player, config, div) {alert(3) function setup(evt) { alert(4) div.style.color = 'black'; div.innerHTML = config.text; }; player.onReady(setup); this.resize = function(width, height) {200,200;}; }; jwplayer().registerPlugin('hello.js', template); })(jwplayer);` .setup(evt) { }doesnt work – Hitesh Apr 17 '13 at 04:49
  • i am using JWplayer 6 @EthanLongTail – Hitesh Apr 17 '13 at 04:50
  • i got the ans jwplayer().registerPlugin('helloworld.js','6.0', template); above line was showing error because i didnot included the '6.0' parameter. **i got confused with this link .... http://www.longtailvideo.com/support/jw5/31166/building-javascript-plugins ..... but no prob :)...... @EthanLongTail : can u help me to bring the caption division down ... i dont have any clue how to call the caption division in my own plugin – Hitesh Apr 17 '13 at 14:56
  • You can move the message that shows up via CSS. – emaxsaun Apr 17 '13 at 17:30

3 Answers3

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.

dev
  • 3,969
  • 3
  • 24
  • 36
  • can u please check with this one i am working on jwplayer but i cannot find where i should edit to show caption outside the player http://www.longtailvideo.com/support/jw-player/28845/adding-video-captions/ you will need this as well http://www.longtailvideo.com/jw-player/get-player/ http://www.longtailvideo.com/support/jw-player/28833/quick-start-guide thanks for help – Hitesh Apr 15 '13 at 07:23
  • @hitesh Hi I'll download the player and give it a try, will let you know soon. – dev Apr 15 '13 at 19:04
  • 1
    @hitesh I've just set up a demo with a SRT file and they are appearing in a div container with the id `myElement_caption` and the class `jwcaptions`. – dev Apr 15 '13 at 19:34
  • yea i too found it and i am working on it ...but it seems to have some calculation in js file – Hitesh Apr 16 '13 at 11:40
  • yea i too found it and i am working on it ...but it seems to have some calculation in js file i am unable to modify it i try modifing it in two three places by keeping some condition but doesnt seems to work this div are in file "jwplayer.html5.js" line no 32-34 and in file jwplayer.js line no 34 ,36 search for keyword "captions" i am unable to do it if u can try it and tell me how to do it ... it would be great help thanks for trying it out send me some code if u get any :) – Hitesh Apr 16 '13 at 11:56
  • Do not modify our JS file. That is not something we are going to be able to help you with. – emaxsaun Apr 17 '13 at 17:31
  • @EthanLongTail First off I'll say JW player is a great HTML5 player. Yes I agree modifying the JS file is not a good idea, that's why I first suggested just adding CSS style to override the inline styling applied by the JS file. Nobody wouldn't expect you to help with modifying your script for an individual users needs, I guess that's why he came to SO instead of using the LongTail support team :) – dev Apr 17 '13 at 17:49
  • Yes exactly :) Modifying the CSS is the way to go here :) – emaxsaun Apr 17 '13 at 18:03
  • 1
    Hi @hitesh as Ethan as mentioned above, overriding the CSS is the better option here, instead of modifying the JS file. It will just involve using `!important` a lot :) – dev Apr 17 '13 at 19:05
  • hi thanks @EthanLongTail and vletech .... i did it ... i just just adding CSS style to override the inline styling applied by the JS file and it worked ... thank u guys .. great help ....and i do agree with vletech that JWplayer is great HTML5 player :) – Hitesh Apr 25 '13 at 07:35
  • @vletech:thanks for your valuable information on everything ... you really saved my time ... i was searching to do this through plugin but it was getting more n more complicated .. i tried you idea of adding css to override the inline styling applied by the JS file and it worked .... thanks a lot :) – Hitesh Apr 25 '13 at 07:38
  • Awesome. Can you share what you did? It would really help others in the community! :) – emaxsaun Apr 25 '13 at 15:53
  • @EthanLongTail:Hi Ethan,i need to get the caption in my own division... is it possible ??also can anyone tell how can i use your source code ...available in http://developer.longtailvideo.com/trac/ svn co http://developer.longtailvideo.com/svn/tags/mediaplayer-6.X if it is open source how do i use it and than again compile it .....and make the html5 and flash file again – Hitesh May 15 '13 at 10:09
  • i have also tried this below soft but couldnt undersatand how to use it =To build the JW Player, you will need the following software: * Flex SDK 4.1: http://sourceforge.net/adobe/flexsdk/wiki/Downloads/ * Ant 1.7.0: http://ant.apache.org/bindownload.cgi – Hitesh May 15 '13 at 10:14
  • Source code support is something we don't really have support for due to the amount of volume we get – emaxsaun May 28 '13 at 04:21
0

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

Hitesh
  • 4,098
  • 11
  • 44
  • 82
  • i am sorry if this ans is not working out for some of you it is not the exact ans but only overview of what u need to do :) – Hitesh May 15 '13 at 10:09
0

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));
})
Hitesh
  • 4,098
  • 11
  • 44
  • 82