In my project I'm using swiper.js as a slideshow, each slide either contains and image or a html5 video with webvtt captions / subtitles.
On debugging, we noticed that the subtitle position is wrong (too low, cuts off screen) on webkit browsers.
After much debugging it turned out that this css3 rule on the parent div (the swiper-wrapper) makes the vtt position wrongly:
transform: translate3d(-1024px, 0px, 0px)
When you put the video in the first slide, all goes well, since there's no css translate yet.
This seems to be a core webkit issue: default webvtt positioning breaks when using css translation on a parent.
The workaround I found is to add a line positioning in the vtt itself to every subtitle element, like so:
WEBVTT
00:00:02.160 --> 00:00:06.440 line:90%
hello world
00:00:06.560 --> 00:00:11.920 line:90%
testing subtitles
Any sentence without the "line: 90%" part is rendered partly offscreen. It seems this setting forces the webvtt parser / renderer to set itself to the correct position.
QUESTION: did anyone encounter this issue yet and is there any other (easier) workaround for this bug? Adding the "line:" part to all subtitles would be a hell of a job.. unless there's a good editor that can do that stuff in batch.
QUESTION 2: Since this seems to be a webkit vtt parser bug, anyone know where to best report this?
Test setup here: http://orgonemedia.nl/webvtt-bug/
I'm currently debugging some WebVTT files for English captions and other languages too. I'm experiencing a similar problem, although I can't say what is exactly causing it. I'm going to try the line:90% fix you've suggested here.
ANSWER TO YOUR QUESTION 1: Regarding the job of adding it to all the subtitles, you'll be happy to know that's actually pretty easy with the right tool. I use Sublime Text Editor. The way I would do it is use "Find all" to find all the occurrences of -->, then simultaneously edit each of those lines, using the arrow key to navigate across to the right place on the line (since each subtitle out-time is the same number of characters, 12), then type in line:90%
UPDATE:
So I implemented your suggestion, using the method I outlined, and it successfully repositioned my captions.
More details: I was only experiencing the problem of captions being half off the bottom of the video when viewing on an iPad. Oddly enough, viewing the same page on an iPhone, they were positioned correctly without any change. The 90% change still adjusted it up though.
Intriguingly the line:90% code does nothing to adjust caption position when viewing the page on Chrome.
I'm having trouble getting much at all to display on Safari desktop. I think there's something invalid about my file format, but I'm darned if I can find it.
When editing the captions through my video hosting service's caption editor (I'm using JWPlayer), the timecodes show up as being invalid:
Image showing caption editor with invalid warning
Related
Im using blender to edit a video and when i try to render it, it comes up with the error: border rendering is not supported by sequencer.
Using blender 2.80
Disabling Render Region fixed the problem for me.
Turning off border rendering (render region blender 2.8) in Rendering -> Properties -> Output properties
fixed it for me.
I recall playing with menus and the hypothesis is that I checked it somewhere along the way to cause that problem in the first place.
I cant comment yet bc of reputation apparently, so I guess I have to leave my comment behind here. I do have an answer but I'm not sure if it is a correct one.
I had the same problem, and I think i fixed it by unchecking the sequencer box under Post processing in the same tab as where you edit the format and encoding etc. But now that it does let me render my video (just a picture with audio under it) the render result is audio only? Could be a seperate problem or part of this solution, idk. Would unchecking that box help for you?
(first post on stack overflow!)
Computer Engineer, but I'm fairly new to web development and I'm trying to learn all the best practices.
I typically add my styling class to a div when adding an image. (not so sure this is the best way anymore)
So for example, right now I'm adding a div with a border and a max width/height of 100% then letting the image inside the div expand to either but not outside of the div.
This however isn't working in IE9. Its expanding the to image full size creating major layout issues.
This has probably been gone over but I couldn't seem to get the search terms right to find the answer.
So is there a standard way to fix this? Even though it won't really be too difficult to add max-width and max-height to the tag I don't really wan't to do that..I'm sure there will be some issues with doing that. This site I've been working on is getting fairly large and VERY complex.
I think internet explorer might be a tiny bit retarded. How did it ever become a major browser!? Go Chrome!
Thanks!
I need to render text contained within divs on HTML document into PDF. I'm thinking of using PhantomJS, but one thing is very important. Different browsers and platforms render the text differently. So if I have the following code:
<div style='width:150px; height:80px; position:absolute; top:130px; left:78px'>
<p> Some text, yayy! :) </p>
</div>
It may render on one browser like this:
Some text, yayy!:)
But on another like this:
Some text,
yayy!:)
What happened was that (because of font-hinting, I guess), the text in the first example ended up with a certain width that fit into the containing div, but because of the font rendering on the second browser, the text ended up taking just a little more space that didn't fit in the container, and had to wrap around to the next line. I can't afford this kind of unreliability on how the output turns out. If the HTML had it on one line, I need the PDF to have on the same line too.
I've actually asked a related question here: Make fonts on Windows render like Mac/Linux: disabling font-hinting and/or deal with anti-alias on client side with no luck, but it was basically in trying to solve this same issue.
Can PhantomJS do anything about this? Or can PhantomJS at least somehow calculate the true width of a text, without font hinting and any other things involved? Or maybe calculate what it might render to if hinting were included? Or anything, as long as things come out on the PDF as they look on HTML. (Given the application I'm working on, I do not have the freedom change the CSS style of the containing DIV).
Font hinting is almost certainly not what is changing the width of text here. Font hinting involves making small adjustments to line up edges in an outline font to screen pixels; the adjustments are made within each character and should not change the overall width of that character.
Across platforms, there are slightly different versions of a font because of licensing issues. macOS and GNU/Linux can't usually go out and copy Microsoft's fonts exactly, for legal reasons, so the nearest you'll get is a font that basically looks the same (and has a similar name) but isn't really the same font. So some width variations across platforms are to be expected, unless you can provide your own font files along with the page (web fonts).
PhantomJS uses the system's fonts just like any other browser. So using PhantomJS will not automatically give you some "cross-platform" set of fonts that's different from your system fonts.
If you need 100% reproducibility then I suggest creating a virtual machine (or Docker image) with a standard set of fonts installed, and use that everywhere. Just don't forget to apply security patches to it when needed.
Currently, I have an RSS Feed Reader in a UITableView within a Navigation Control. I would like to click on the links and Open up a formatted page (containing all of the information from the website formatted for the iOS screen). I'm not sure if I should do this using the RSS data and a UITextView? I'm currently attempting to use UITextView in hopes that I can separate the information (title, author, body) without anything looking promising. I want to be able to move around the data and format it to my liking in the actual application itself. I read around and noted that you can include HTML and custom CSS. Would this be the way to go? I'm not quite sure how to tackle this. I want the page that opens up to be entirely scrollable (Like the IGN application or Slashgear application). Many apps for websites utilize this (and I am a bit new to this). How do they go about this? I also want to note, at some point I will like to cache the data so it may load what is already loaded without being connected to the internet. Does anyone have any ideas?
Edit:
Ok, I believe I found the correct path to go down from playing around and a lot of googling (nothing directly says what a decent way of doing this is). My particular way as of now is the route of a UIScrollView in general. Now the part I don't understand is how to divide up the long text into 'pages' for scrolling (and I am using the paging feature. This situation has led me into this question: How To Separate Strings For UIScrollView/UITextView based on the size of the frame
Ok, I believe I found the correct path to go down from playing around and a lot of googling (nothing directly says what a decent way of doing this is). My particular way as of now is the route of a UIScrollView in general. Now the part I don't understand is how to divide up the long text into 'pages' for scrolling (and I am using the paging feature. This situation has led me into this question: How To Separate Strings For UIScrollView/UITextView based on the size of the frame
I am working on the PDF App for iPad and facing an issue: how to search a text in PDF and also how to highlight that text?
Yours is the same big problem I'm having. My understanding is that, currently on iOS 4.0, the main public API is CGPDF . It allows us to parse PDF, and with it we can search strings in it. See also this Quartz 2D document. It also allows us to render it on the screen using CGContextDrawPage. However, it's not yet possible to get the position of a text in the rendered image. (On OS X it's possible using PDFKit.)
So, I'm afraid that you need to implement the PDF spec yourself to get that info. I think GoodReader etc. is working very very hard to implement these.
I had the same trouble recently and then I found FastPDFKit. Have tested the package and it's working great.
http://mobfarm.eu/fastpdfkit