sunnyli / videojs-ass Goto Github PK
View Code? Open in Web Editor NEWAdvanced SubStation Alpha subtitle plugin for videojs
Home Page: https://sunnyli.github.io/videojs-ass/example.html
License: Other
Advanced SubStation Alpha subtitle plugin for videojs
Home Page: https://sunnyli.github.io/videojs-ass/example.html
License: Other
subtitle changes position is wrong in chrome
what is the problem? where should i start debugging?I am using videojs 5.12.6 and cannot toggle the subtitle display on touch devices. You can test it on Chrome's device emulation.
You are listening to click events, but other videojs buttons actually listen to tap, focus and blur in addition to click:
https://github.com/videojs/video.js/blob/v5.12.6/src/js/clickable-component.js#L27
Also, other videojs buttons simply extend the Button Class with the handleClick
and buildCSSClass
methods instead of calling this.on('click')
and this.addClass
on the constructor.
Example:
https://github.com/videojs/video.js/blob/v5.12.6/src/js/control-bar/play-toggle.js#L39
https://github.com/videojs/video.js/blob/v5.12.6/src/js/control-bar/play-toggle.js#L30
Suggestion:
constructor: function (player, options) {
options.name = options.name || 'assToggleButton';
VjsButton.call(this, player, options);
-
- this.addClass('vjs-ass-button');
-
- this.on('click', this.onClick);
},
- onClick: function () {
+ buildCSSClass: function () {
+ var classes = VjsButton.prototype.buildCSSClass.call(this);
+ return 'vjs-ass-button ' + classes;
+ },
+ handleClick: function () {
if (!this.hasClass('inactive')) {
this.addClass('inactive');
overlay.style.display = "none";
Browser: Mozilla Firefox 39.0
When the demo video is rendered, few random subtitles are 'flickering'. I checked it on another video with my own .ass
subtitle file, and the issue persists. But just so that it's convenient for you to verify, here is an example:
Example: In the demo video (duration 3:36
), observe the frames from (0:32
to 0:40
). All the subtitles except the last one (in the frames from 0:32
to 0:40
) are rendered properly. The last subtitle 'flickers'. It is rendered as expected. But it vanishes for a moment and then reappears again. The subtitle line reads "What loathsome tales".
This flickering issue is not so noticeable in your demo video. But in some other videos, this is highly noticeable and hinders the efficiency of the plugin.
I am not sure if this is some problem specific to my software environment.
PS: I love videojs-ass
TypeError: videojs.Button is undefined
108L: AssButton = videojs.Button.extend();
i'm using instruction from https://github.com/videojs/video.js#quick-start
<link href="http://vjs.zencdn.net/5.0/video-js.min.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.0/video.min.js"></script>
The subs for the example video jitter a lot, especially for the lines using \move
The issue is the clock provided by player.currentTime()
is very low-resolution - its value only updates every 250-500ms. However you set the autoPauseAfter
parameter of AutoClock to 100ms. This means that when libjass's internal high-resolution clock and video.js's clock become more than 100ms apart, libjass will snap to video.js's clock (usually backwards) and then pause for the remaining time until the video.js clock updates again (snap forward). Because of this constant snapping and 150-400ms pauses the subs appear to jitter back and forth instead of moving smoothly.
This is from my testing with the youtube example, so I don't know if different video.js sources have different clock resolutions. Atleast for that one, you get a better experience with clock = new libjass.renderers.AutoClock(getCurrentTime, 500);
and reducing the delay from -0.45 to -0.1
Consider putting
window.addEventListener('resize', updateDisplayArea);
outside of player.fluid() that way it would update if someone is using window.resze();
to define their player width/height (normally this is done on the embedded server)
Is it possible to provide the source of the subtitles to be on a different track of the video? In my case, track 3.
This happens with a simple implementation of videojs-contrib-ads (heisenbug.html) and with videojs-vast-vpaid (heisenbug2.html), though the latter case is much, much rarer.
This happens the most when the video doesn't autoplay, but bizarrely, adding a new subtitle track somehow fixes it.
I brought this up in the libjass repository and the main project leader had this to say
videojs-ass is starting the clock before calling resize, thus WebRenderer.preRender is getting called before its scaleX and scaleY properties have been initialized. videojs-ass needs to fix this.
Hello!
Can someone update to videojs 7 ?
Thanks!
Any particular reason you do this
subsRequest = new XMLHttpRequest()
...
subsRequest.open("GET", options.src, true);
subsRequest.addEventListener("load", function () {
var assPromise = libjass.ASS.fromString(
subsRequest.responseText,
libjass.Format.ASS
);
...
subsRequest.send(null);
instead of just
var assPromise = libjass.ASS.fromUrl(options.src, libjass.Format.ASS);
? Is there something wrong with fromUrl that you can't use it?
Latest version of videojs some reason videojs-ass has stopped working with an error.
Uncaught (in promise) TypeError: Cannot read property 'srclang' of undefined
.
Do not support metadata type data?
any version above this one gives off errors
When going fullscreen on chrome, subtitles moves, are not visible or are in wrong position, on firefox everything works ok.
go here:
https://sunnyli.github.io/videojs-ass/example.html
on chrome and go fullscreen.
Subtitle on iPhone and iPad doesn't show
i tried a on all apple touch devices but when i switch to full screen the subtitle disappear
it's seems the ios switch to native player instead off videojs
is there a solution to this?
Hi there. Thanks for the useful plugin.
How can I put multiple ASS subtitle on one video with switcher on the video control bar?
Thanks
Hi guys, I have some questions about this plugin.
I seen the .ass file appear on HTML source. There is a way for hide this or unable people to download .ass?
Is this plugin compatible with videojs 5?
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?
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?
hello today i updated a videojs to version 5.11.0
the problem is class vjs-ass not insert a second element but class vjs-ass append to last element.
How can i fix it ? Thx u :D
Hi,
videojs-ass and libjass it's very good but still there some bugs in libjass
recently i tried to use JavascriptSubtitlesOctopus https://github.com/Dador/JavascriptSubtitlesOctopus
it's work like charm on videojs and no bugs at all in rendering ass files, like vlc exactly !!
but i just need a toggle to make the subtitle off/on like videojs at least for now!
can anyone make a costume button to do that ?
i using same this ex https://dador.github.io/JavascriptSubtitlesOctopus/videojs.html
another thing, is there any plan to work on JavascriptSubtitlesOctopus in videojs-ass plugin ?
just like libjass lib, i think add JavascriptSubtitlesOctopus to a second choice would be great!
thanks ..
Please switch this repository to use something like:
https://github.com/SABRE-JS/SABRE.js
or some other implementation like Subtitles Octopus.
Subtitle on ps4 not working
hi, prompt and have the opportunity to insert into the subtitles link?
..and highlight the subtitle text with the cursor like a regular text
Hello, I just found this amazing plugin and I wanted to know if is possible to change/remove subtitles dynamically via JS?
I'm changing the video source via JS, but I also need to load a new subtitle file. Is this possible in any way?
Thanks in advance.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.