Subtitles using JWPlayer?

[gfjardim]

Hi, I was looking at the JWPlayer documentation, and found this:

http://www.longtailvideo.com/support/ad ... ence-guide

Seems not a lot of work to implement this into Subsonic, and that would be a great improvement. Can it be done?

[]'s

[Hellscream]

I was browsing for solution and i found this.
I just hope someone can help with this.
http://www.codemiles.com/php/php-srt-to-xml-subtitle-converter-t1347.html

[Miles]

Hi,

I was looking for a solution to add subtitles on Subsonic. I found this post and I decided to check this from myself.
And, I found a solution in order to add subtitles with JWplayer and captions plugin.

This solution is pretty simple, you just have to add few lines of code in a .jsp file.
For this to work, you've just have to have the .srt file in the same folder as the video file.

So here are the code to add in videoPlayer.jsp (in /var/subsonic/jetty/2384/webapp/WEB-INF/jsp/ - Note that I'm under linux, maybe the path is not exactly same as on other platforms).

Find this line (near line 20) :

Code: Select all

function init() {

and add this code just before :

Code: Select all

var streamUrlPath = "${streamUrl}";
var srtPath = streamUrlPath.substring(0,streamUrlPath.length-6)+'737274';

Then, find this lines (near line 30) :

Code: Select all

var flashvars = {
   id:"player1",
   skin:"<c:url value="/flash/whotube.zip"/>",
   //                plugins:"metaviewer-1",
   screencolor:"000000",
   controlbar:"over",
   autostart:"false",
   bufferlength:3,
   backcolor:"<spring:theme code="backgroundColor"/>",
   frontcolor:"<spring:theme code="textColor"/>",
   provider:"video"
};

And add this code just after '// plugins:"metaviewer-1,"' and before 'screencolor:"000000",':

Code: Select all

plugins:"captions-2",
'captions.file':srtPath,

Here are the full snippet :

Code: Select all

<.... here are code ....>

var player;
var position;
var maxBitRate = ${model.maxBitRate};
var timeOffset = ${model.timeOffset};
var streamUrlPath = "${streamUrl}";
var srtPath = streamUrlPath.substring(0,streamUrlPath.length-6)+'737274';

function init() {

   var flashvars = {
      id:"player1",
      skin:"<c:url value="/flash/whotube.zip"/>",
      // plugins:"metaviewer-1",
      plugins:"captions-2",
      'captions.file':srtPath,
      screencolor:"000000",
      controlbar:"over",
      autostart:"false",
      bufferlength:3,
      backcolor:"<spring:theme code="backgroundColor"/>",
      frontcolor:"<spring:theme code="textColor"/>",
      provider:"video"
   };
   
<.... here are code ....>

And that's all !!!

However, unfortunately, once you change the bit rate or the time offset, it doesn't work because video is loaded with timeOffset and the .srt file starts always at 0:00.
To resolve that, I don't have easy solution, but If someone has a apache server, running on the same system, I can give you a PHP file I wrote, who can changes subtitles offset, and you just have to change the subtitle file path to link with your apache server....

Hope it will be usefull !
Miles

[Hellscream]

Well m8 i just test it and everything is fine i just need few more thing
How to change character set to (east/central Eur.) because of damn letters ž đ š ć č, bigger font and other color?
Keep with good work cheers

[Redsyrup]

Thanks Miles and others... I used your code and now have subtitles! I did a little extra research because I don't like white subtitles. I'm old school and prefer the yellow contrast.

For others like me try this modified code or change to your prefered color.

plugins:"captions-2",'captions.file':srtPath, 'captions.color':"FFFF00",

[Castius]

MILES Thank you Thank you Thank you .
I've been trying to figure out that srtPath var for ever!

I used split to change the extension to SRT. But could only get it to work inside the subsonic folder.
viewtopic.php?f=2&t=5300&p=29066&hilit=subtitles#p29066
Do you mind explaining those two lines? I don't know java and i would love to understand what you are doing there.
Why -6 on the length and why 737274

[winnie666]

Miles thank you that is awesome.
I do as a matter of fact have an apache server running so would you mind posting the php file along with instructions on how to setup? Thnx mate!

[benten127]

hi!

I have updated subsonic to 4.7 beta 2, but this code does not work anymore for subtitles how it is possible to resolve this issue?

Thanks! (sry for bad english)

[standardnoise]

Hello,

Add this to your VideoPlayer.jsp:

Code: Select all

    <sub:url value="/stream" var="streamUrlPath">
        <sub:param name="path" value="${model.video.path}"/>
    </sub:url>

right below this:

Code: Select all

    <sub:url value="/stream" var="streamUrl">
        <sub:param name="id" value="${model.video.id}"/>
    </sub:url>

and then use that variable like this:

Code: Select all

var streamUrlPath = "${streamUrlPath}";

So, you should have:

Code: Select all

<sub:url value="videoPlayer.view" var="baseUrl"><sub:param name="id" value="${model.video.id}"/></sub:url>
<sub:url value="main.view" var="backUrl"><sub:param name="id" value="${model.video.id}"/></sub:url>

    <sub:url value="/stream" var="streamUrl">
        <sub:param name="id" value="${model.video.id}"/>
    </sub:url>
    <sub:url value="/stream" var="streamUrlPath">
        <sub:param name="path" value="${model.video.path}"/>
    </sub:url>

    <script type="text/javascript" src="<c:url value="/script/swfobject.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/prototype.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/scripts.js"/>"></script>
    <script type="text/javascript" language="javascript">

        var player;
        var position;
        var maxBitRate = ${model.maxBitRate};
        var timeOffset = ${model.timeOffset};
      var streamUrlPath = "${streamUrlPath}";
      var srtPath = streamUrlPath.substring(0,streamUrlPath.length-6)+'737274';

The rest is the same.

[omegatotal]

anyone have any advice on how to set this up and also have the subtitles stripped from mkv or other supported files?

or loading them from bluray 'stream' folder?

[benten127]

thanks you standardnoise !!

[nikku]

Has anyone figured out how to get subtitles working in the player for the android app? I know it loads up a webpage with a player in it, but for some reason the plugin that does the subtitles never loads. Is there a separate player.jsp file on the subsonic server that would be handling this, that I would need to modify?

Thanks for any input!

[Tenaya]

I'd thought i'd share my experience with enabling subtitles for Subsonic.

I've been using Subsonic for a long time and i love it. The only problem for me has been the lack of supported subtitles. Never really bothered to look for a solution cause i was sure it was gonna get implemented anyway and to be honest i dont really mind watching without subtitles.

In any case, i was watching a movie with a lot of foreign languages so i thought i'd look for a subtitle patch. I found this thread and tried out the patch and it works great, except for the going out of sync when skipping ahead part. I did a little tweaking and got it working and i thought i'd share it here since this is where if found the initial tweak.

TLDR: look at the bottom for the download link.

Ok so, the problem was the subtitle going out of sync when skipping ahead. Easy fix, i thought. Just have the subtitle offset when skipping ahead. Great idea, except that JWPlayer Captions plugin doesn't support offsetting the subtitle. That's fine though, since its open source.

First thing i did was was grab the source from here:

http://developer.longtailvideo.com/trac ... s/captions

It's very easy to compile. All you have to do is go into the 'build' folder and run the .bat file (for windows). Obviously you need Flex SDK for it to work though but you can get that easily from adobes site.

Now you need to make the JWplayer in Subsonic load your plugin. Usually JWplayer loads plugins directly from their site (http://www.longtailvideo.com). That's an easy fix.

Open up subsonic.war in winrar or some other tool to open compressed libraries. You'll find the file in your subsonic installation. Once open navigate to WEB-INF/jsp/videoPlayer.jsp and open that file in a text editor.

Follow standardnoise and Miles directions above and then continue here. I'm goin to assume you have already added their code.

Find the variable 'flashvars' in the init() function and edit this line.

Code: Select all

        plugins:"captions-2",


into this:

Code: Select all

   plugins:"./flash/captions.swf",


It should look something like this.

Code: Select all

            var flashvars = {
                id:"player1",
                skin:"<c:url value="/flash/whotube.zip"/>",
//                plugins:"metaviewer-1",
            plugins:"./flash/captions.swf",
            'captions.file':srtPath,
                screencolor:"000000",
                controlbar:"over",
                autostart:"false",
                bufferlength:3,
                backcolor:"<spring:theme code="backgroundColor"/>",
                frontcolor:"<spring:theme code="textColor"/>",
                provider:"video"
            };


So far its very similar to the above solution. Now it's where i add a few things.

In the same subsonic.war file you opened videoPlayer.jsp in, go back all the way to the initial folder. Go into the folder named 'flash'. In here drag and drop(if you used winrar) the file we compiled before. If you didnt change the build script it should be named captions.swf and be located where you saved the source code for the captions plugin.

Now you should have two files in the flash directory.

Code: Select all

captions.swf
jw-player-5.6.swf


Save the war file and close it for now. Restart subsonic and go watch a movie. If you get no errors it means that JWplayer correctly reads the local copy of the captions plugin. Now we can modify it to our needs.

Go back into the uncomliled source code for the captions plugin and navigate to this file: src\as\com\longtailvideo\plugins\captions\Captions.as

Open it up in your favorite text editor (notepad++ is lovely). Alright, now navigate to line 30ish. You're looking for this variable:

Code: Select all

        private var _config:Object = {
            back: false,
            label: undefined,
            file: undefined,
            state: true
        };


Change it so it looks like this:

Code: Select all

        private var _config:Object = {
            back: false,
            label: undefined,
            file: undefined,
            state: true,
            offset: 0
        };


Find this line on row 169:

Code: Select all

    _renderer = new Renderer(_defaults,_config.back);


Edit it into this:

Code: Select all

    _renderer = new Renderer(_defaults,_config.back,_config.offset);


When you're done with that go ahead and save the file and close it. Now open up Renderer.as in the same folder. Add this line:

Code: Select all

    private var _offset:Number;


After:

Code: Select all

    private var _style:Object;


Find the constructor:

Code: Select all

        /** Constructor; solely inits the captions file loader. **/
        public function Renderer(style:Object,outline:Boolean) {


Modify it into:

Code: Select all

        /** Constructor; solely inits the captions file loader. **/
        public function Renderer(style:Object,outline:Boolean,offset:Number) {


Now on the line right after add this:

Code: Select all

    _offset = offset;


Then find this snippet of code within the _selectCaption() function:

Code: Select all

            for (var i:Number=0; i<_captions.length; i++) {
                if (_captions[i]['begin'] <= _position &&
                    (i == _captions.length-1 || _captions[i+1]['begin'] >= _position)) {
                    found = i;
                    break;
                }
            }


Modify it into:

Code: Select all

            for (var i:Number=0; i<_captions.length; i++) {
                if (_captions[i]['begin'] <= _position+_offset &&
                    (i == _captions.length-1 || _captions[i+1]['begin'] >= _position+_offset)) {
                    found = i;
                    break;
                }
            }


Go ahead and save that file too. Now you can go ahead and recompile the caption plugin again. Go back into the subsonic.war file and save it into the /flash/ folder. Overwriting the old one.

Now we're almost done. We just need to make a few more modifications to videoPlayer.jsp. Go ahead and open it again. Located in the subsonic.war at WEB-INF/jsp/videoPlayer.jsp.

This is getting quite lengty so ill just add the functions that you need to overwrite.

Replace entire init() with this:

Code: Select all

        function init() {

            var flashvars = {
                id:"player1",
                skin:"<c:url value="/flash/whotube.zip"/>",
//                plugins:"metaviewer-1",
                screencolor:"000000",
            plugins:"./flash/captions.swf",
            'captions.file':srtPath,
            'captions.offset':timeOffset,
                controlbar:"over",
                autostart:"false",
                bufferlength:3,
                backcolor:"<spring:theme code="backgroundColor"/>",
                frontcolor:"<spring:theme code="textColor"/>",
                provider:"video"
            };
   

            var params = {
                allowfullscreen:"true",
                allowscriptaccess:"always"
            };
            var attributes = {
                id:"player1",
                name:"player1"
            };

            var width = "${model.popout ? '100%' : '600'}";
            var height = "${model.popout ? '85%' : '360'}";

            swfobject.embedSWF("<c:url value="/flash/jw-player-5.6.swf"/>", "placeholder1", width, height, "9.0.0", false, flashvars, params, attributes);

        }


Replace entire changeTimeOffset() with this:

Code: Select all

        function changeTimeOffset() {
            timeOffset = $("timeOffset").getValue();
       player.remove();
   
       var wrapperelement = document.getElementById("wrapper");
       var placeholder = document.createElement('div');
       placeholder.setAttribute('id','placeholder1');
       wrapperelement.appendChild(placeholder);
           
       init();
        }


Save it. Update your war. Restart Subsonic and dont forget to clear your cache. And you're done.

You might wonder why i had to remove the entire player and then add it again. Believe me i was wondering the same. But apparently you can only set flashvars when you create the player. Oh well. Now it works.

In any case, if you thought that the above is to tedious/hard/boring/whatever i have the compiled subsonic.war for you right here. It's for 4.7 beta 2.

http://www.filedropper.com/subsonic

Using this method you could easily modify it to work when changing bitrates as well. You could even create a list of subtitles to switch between if you wanted. But i'll leave that for someone with more time than me. If no one wants to see how far this method can go i might pick it up again when i have more time.

Good Luck!

[nikku]

Wonderful, thanks for posting this. This was the only problem I was getting complaints about from friends/girlfriend!

[Noxeus]

Please mirror that!
It would be very much appreciated!
The current url is down.

EDIT: Also I can't get it to work with code only.
I have exactly the same code in my videoPlayer.jsp but the plugin isn't loaded and no movie plays.
If I comment out

Code: Select all

plugins:"./flash/captions.swf",
'captions.file':srtPath,


it works..