Some questions about videoj-ass about videojs-ass HOT 31 CLOSED

Hey,

I seen the .ass file appear on HTML source. There is a way for hide this or unable people to download .ass?

The plugin executes on the client side so the client will have to be able to read the .ass file..
If you don't want certain user to see the subtitles then you can authenticate the user before you serve the file? There's no file encryption if that's what you are asking.

Is this plugin compatible with videojs 5?

Yes, videojs 5 compatible code is on the v0.5 branch but since it looks like you are using npm you can get it by adding this to package.json like so:

"dependencies": {
    "videojs-ass": "^0.5.0"
}

In this page: https://www.npmjs.com/package/videojs-ass you say "If you are not on a phone or using a very bad browser, come check out the demo here". So, will the subtitle appear only on desktop browser?

It should work on all the latest desktop and mobile browsers. What I said there refers to videojs-youtube plugin (for vjs 4.x) which I used for the demo video that was kind of glitchy on mobile browser when I first tested it.

What about fonts? As far as I know, You you put an .ass file inside a .mkv you need to attach also the font used in your .ass, otherwise the custom font you choose won't appear. Shouldn't be something similar with this plugin?

You can use CSS @font-face to load up the special fonts. Just make the font-family match the font used in the .ass file.

from videojs-ass.

Thank you. Anyway I use a self-hosted video-js, used here: https://github.com/videojs/video.js/releases/tag/v5.4.4

I also would like to use a self-hosted videojs-ass. How can I do?

from videojs-ass.

Just download the v0.5 js and css and serve it like what you've done with videojs.

from videojs-ass.

Thank you. I done this. Anyway doesn't work.
here you can find my player code. I think I made some mistake is in the script... http://pastebin.com/1vKgjz72

from videojs-ass.

for doesn't work I mean the subtitles oesn't appears on player and doesn't appear the button

from videojs-ass.

Can you paste the fully rendered html template? I can't help you with just the php partial you've given me, I don't know what version of videojs and videojs-ass you are using or why things are failing.. preferably if you paste it on jsbin or codepen and see that it renders the player so that I can see what went wrong..

from videojs-ass.

Here's to you: http://jsbin.com/zalavepari/edit?html,css,output

from videojs-ass.

Hi, have you got my last message?

from videojs-ass.

"giggioman00, you should not using remote path for subtitles. and yeah even subtitles in standart track won't work on jsbin.com with remote subtitles..."

Well, trying in localhost with local subtitles doesn't work either.
In jsbin I cannot upload subtitles so I can only use remote subtitles. But this shouldn't be the problem since even in localhost I have this problem

from videojs-ass.

you have to run it on that server where subtitles are keeping (so it won't work if subtitles on test995.altervista.org but you run html on jsbin)

from videojs-ass.

http://jsbin.com/fuziyecahi/edit?html,css,output
I fixed some errors in your code
you should test it only on test995.altervista.org
and subtitles won't be showed correctly when you use vjs-fluid

from videojs-ass.

It works...
But for my site I wanted to store .ass path in database table (anyway the path will be in the same server of the player) and then make a call to the db table.
Do you mean this is not possible?

from videojs-ass.

"Do you mean this is not possible?" no, i mean about different server for subtitles
so it will be working ok if you upload subtitles on test995.altervista.org (the same server)

from videojs-ass.

Thank you. Now I'm making some test. I removed vjs-fluid but subtitles seems to be too big.
Please take a look.
This is how I see subtitles on my PC: http://s28.postimg.org/qhblae9b1/ass1.jpg
And this is how I see subtitles in videojs player: http://s28.postimg.org/56e164r6l/ass2.jpg

The source file is the same in both and the ass have the right resolution of the video.
Do you know why this happens?

from videojs-ass.

where can I download "[150327][Collaboration Works]Mankitsu Happening 01 RAW.mp4" ?

found it

I will check it

from videojs-ass.

Hi, for the moment I'm not testing on test995.altervista.org but I'm testing on localhost with other file video.
Of course I already set the right resolution for the video source. Video source is 720*480
and opening .ass file I can see:
[Script Info]
; Script generated by Aegisub 3.2.0
; http://www.aegisub.org/
ScriptType: v4.00+
WrapStyle: 1
PlayResX: 720
PlayResY: 480
YCbCr Matrix: TV.601
ScaledBorderAndShadow: no

from videojs-ass.

yeah... there is a difference in video-js and windows players (for e.g.)
you better ask SunnyLi about it
but you can also change the size of font using Aegisub

from videojs-ass.

Ok thank you :) I'm waiting an answer from him then
And another question: I really need the player to be responsive... how can I do? When do you think to release the full support to vjs-fluid? If it's not soon, could you please tell me more about this and which files are related so i try to change something by myself? Thank you

from videojs-ass.

Hey @giggioman00 sorry I wasn't able to respond sooner.

For your jsbin issue, the reason why it wasn't working was because you tried to initialize the plugins after you've already initialized the player through the videojs hotkeys code block.
On browser console it displays the warning: "VIDEOJS:" "WARN:" "Player "Video" is already initialised. Options will not be applied."

As @anonym24 had shown, moving the plugins initialization code above the hotkeys block solves the problem. The reason for why the subs aren't showing was because your server didn't have CORS setup to allow external web site to hotlink your subs which I guess works in you favor..

Anyways, I will now go add vjs-fluid support by using what is suggested here

P.S. kudos to @anonym24 for helping out. 👍
P.P.S. for font size issue see Arnavion/libjass#55, this plugin still depend on the v0.10 of libjass so the additional improvements made there won't apply here yet.. For using a non web default font, the first method described here should work.

from videojs-ass.

Thank you very much. Is everything fixed right now?

from videojs-ass.

Yes, just checkout out the latest version on branch v0.5 which is also published to bower and npm.

from videojs-ass.

Yes, now works fine! Thank you very much, that was so fast
But still I'm facing problems with the size of the font. I'll go to ask more info to Arnavion

from videojs-ass.

In that thread they said there is something to fix by your side...

from videojs-ass.

I think instead of using the libjass fontMap preload method, including the CSS @font-face property will be more than sufficient, it might not work on the very first load as the font download might not have complete before libjass initialization, but on subsequent load it should work as the font will be cached and therefore be taken into consideration.

If you tried the above method and it still didn't solve the font size issue than I don't know what else to suggest as this plugin is essentially just a wrapper and doesn't make any decision on what font or font size to render..

One thing you could do if the subtitle file is dynamically generated is to just increase/decrease font size there?

Edit: Actually, looking at your comment on the other issue thread you should try to get it working using the DefaultRenderer on a basic <video> first without using this plugin, because if you can't get it to work there, than it definitely won't work here.. (DefaultRenderer is basically a wrapper for the plain <video> element which builds on WebRenderer which this plugin use to work with videojs)

from videojs-ass.

I think instead of using the libjass fontMap preload method, including the CSS @font-face property will be more than sufficient, it might not work on the very first load as the font download might not have complete before libjass initialization, but on subsequent load it should work as the font will be cached and therefore be taken into consideration.

This is not correct. WebRenderer uses the fontMap to be able to calculate font metrics as part of initialization. Without this it is very likely that it will calculate metrics for a system font before the web font is downloaded, and then this wrong font metric will persist forever.

See Arnavion/libjass#55 (comment)

from videojs-ass.

@Arnavion But once the browser has downloaded the font already, on subsequent refresh the font will likely be cached and libjass will be able to calculate the metric based on the already downloaded font?

font metric will persist forever

I don't see how this is possible assuming the metric is stored within libjass and it's not persisted anywhere so on refresh everything resets.

My point is that I agree that it will likely not work on first load but once the font is downloaded and cached then on the subsequent load/refresh the font metric will be calculated correctly.

and of course I should implement the fontMap so it will also work on the first run.. but I think switching the font might not solve OPs issue.

from videojs-ass.

1. It's already a bad experience to require your user to refresh the page to get things working.
2. It's almost certain that the browser will not instantly render text with the web font even after refreshing the page, since it'll still have to do an HTTP request for the font to validate cache. So even after refresh libjass will calculate wrong metrics.

from videojs-ass.

Alright, I've added the fontMap property.

You can set it like so:

ass: [
  src: ...
  fontMap: [
    ["Foo", ["./fonts/foo.ttf"]],
    ["Bar", ["./fonts/bar.ttf"]]
  ]
]

or use fontMapById and pass in the element's ID.

from videojs-ass.

Hi. Sorry if I bother you again.
I want to ask if there is a way for add a tooltip when the mouse hover the subtitle button.
A tooltip that say: "Subtitles On" or "Subtitles Off".

People who usually doesn't know much about internet could not know what that button is. If they click the button without know what it does and then they don't see subtitles anymore, probably they will spam on the comments that they are not able to see the subtitles.
With a tooltip even the people who usually doesn't know much about internet will be able to unerstand what that button is...

thank you

from videojs-ass.

You can always add the tool-tip in yourself.
Just grab the button element and show/hide the tooltip based on certain events.

Here's one I made which you can just drop into your videojs ready block:

videojs('your_player_id').ready(function() {
  var button = document.querySelector('.vjs-ass-button')
    , tooltip = document.createElement('span');
  tooltip.textContent = "Toggle Subtitle"
  tooltip.style.position = "relative";
  tooltip.style.bottom = "30px";

  button.addEventListener('mouseenter', function() {
    button.appendChild(tooltip);
  })

  button.addEventListener('mouseleave', function() {
    button.removeChild(tooltip);
  })
});

However, instead of using what I have given you, you can probably just use some jQuery plugin that does all that with better result..

Also, you can change the button icon through CSS if you don't find the current one intuitive.
Just replace this part.

from videojs-ass.

Closing due to inactivity and that the initial issue in OP has already been addressed.

from videojs-ass.