Is there a way I could store image url inside VTT file? For example:
WEBVTT
00:00:00.000 --> 00:00:10.000
Chapter tile goes here
thumb_0001.jpg
00:00:10.000 --> 00:00:20.000
Another chapter title
thumb_0002.jpg
I know I could write custom parser, but I am wondering is there some kind of a standard for this?
You would need to have a separate WebVTT metadata track, a player that supports them, and likely some scripting and CSS to act on the cue payload. You can see an AblePlayer demo of a few things a metadata track can do (at the 39 second mark). If you examine the wwa_meta.vtt file, you can see that it references ID selectors that happen to be in the player's page html code.
The example you give is quite similar to what is being done currently across the internet for image thumbnails. It's most commonly used for animated video previews on... adult... websites. If you Google search for ".jpg" filetype:vtt you'll find some interesting examples that take the same approach as yours.
As Murray cited already, it's not really the proper way to do it. The metadata track option he cites is much more inline with correct use of the VTT spec. However it's also not broadly supported. You could follow VTT guidelines and end up with a file that can't be read by many players.
One other option is CSS. VTT is designed to work nicely with CSS. So you could include you image as a CSS background-image. That way it's separate from the text content and (at least in theory) some players might even be able to display it properly.
Related
I am searching for a performant way to generate a PNG based on a layout. These layouts will mostly consist of text and a 1-2 icons. The Datasource for these informations is JSON. However, the JSON won't be normalized to fit the Layout/Screen size. Let me clarify: The JSON will contain an attribute "Title". The title may be too long, so the font size has to be decreased. Or the description has too many attributes and only some of them need to be displayed, and so on.
We currently have a system in place for creating these layouts and generating a PNG, but creating new layouts is very time consuming and frankly speaking, a pain. However, the current solution is extremely performant, as it can generate a PNG in around 1-2ms. For my PoC to be deemed successful, i need to reach 10ms or lower. If there is a solution that takes slightly longer to generate, but can be scaled horizontally, that's fine as well.
TL;DR:
I'm searching for a way to generate a PNG based on a layout i create. The PNG generation needs to be performant (< 10ms) and the implementation of new layouts should be as hassle free as possible.
What technologies are suited for this use case?
Here is an example, of what a layout might look like:
Edit: I can't post images yet, but please search for "electronic shelf labeling" on google images.
Also:
I've already made a similar question yesterday, but it was pointed out that my way of trying to achieve this, probably won't lead to success. Original Post
If you go here (link: https://yle.fi/uutiset/3-11555155) and scroll down this news article, you will see there is a rather long background video that plays as you scroll showcasing some nodes and boxes. However the initial page load is very fast and I don't see it loading a video from anywhere at all.
As I try to understand how this website is put together, I'm not able to see where the video comes from, nor do I know if it's an .mp4 or some other format. When I try to hunt it down in my network tab and monitor if it loads, I just cannot see it and there is no resource that seems to be more than a couple of hundred kilobytes.
How is this possible from a web-design standpoint? Is it some sort of a proprietary solution that stealthily streams the video as it is loaded? If I would like to build a background video that plays on scroll like this in such a performant manner, how could I do it?
Such videos that play on scroll can often be seen for example on the apple.com website, but at least there I can easily also see the original source videos and materials of how the page is put together. Here this is not the case.
I would greatly appreciate if you could answer this super basic question I have. Thank you!
This question is motivated by the answer given in this question
Using the animate package without adobe
I want to create latex beamer presentations without relying on adobe, as it is a pain.
I followed the instructions given in the post's answer, and when compiling the given example code, the output were 4 .svg files, and I have no idea on what to do with them.
Something tells me they should be embedded into an html file that produce a slide-presentation, but I'm a complete noob in html and I've not been able to find an answer on how to achieve this.
No additional wrapper for the individual .svg files is necessary. Simply open the first .svg file in your browser and use the little arrows at the top right for navigation. They automatically link to the next slide.
Inspired by this question, where the poster casually states as fact that <object> should be used instead of <img> to embed images in HTML documents.
I'm developing a web app at the moment, and, being a perfectionist, I try to make it all shiny and compliant with all the standards. As far as I know, the <img> tag is to be deprecated in the upcoming standards for xHTML, and as nowadays even IE is able to handle <object> properly, I wanted to use the <object> tag for all the images on my site
It became clear that the "upcoming standards" the poster was talking about was the abandoned XHTML2 spec, which didn't even formally deprecate <img> anyway. (Although there were apparently rumors to that effect.)
To the best of my knowledge, I've not seen anyone in the web development community advocating for the usage of the general-purpose <object> tag over the arguably more semantic and definitely more compatible <img> tag.
Is there a good reason to use <object> instead of <img>? Should <object> even be used at all in place of <img> – what might this break?
To answer the question in the heading: yes, it is valid, of course. The validity of an object element does not even depend on the type of data being embedded. If you meant to ask whether it is correct, then the answer is yes, there is nothing in the specifications that would forbid it or recommend against it.
Among the possible reasons for using object to embed an image, the most practical is that it allows the fallback content to contain HTML markup, such as headings, lists, tables, and phrase markup. The img element lets you specify only plain text as fallback content—even paragraph breaks cannot be specified.
For accessibility reasons, any image should have fallback content to be rendered e.g. when the document is used in nonvisual browsing (screen reader, Braille, etc.) or the image is not displayed for one reason or other. For any content-rich image (say, an organization chart, or a drawing describing a complex process), the fallback content needs to be long and needs to have some structure.
However, it is rare to use object for embedding an image. The importance of fallback content is not widely understood, and practical economical and technical considerations often cause fallback issues to be ignored. Moreover, object has a long history of slow, buggy, and qualitatively poor implementation in browsers. Only recently has it become viable to use object fairly safely for image inclusion.
The question which element is more semantic is mostly futile, and answers typically reflect just various ways to misunderstand the concept “semantic.” Both img and object mean inclusion (embedding) of external content. The img element is in principle for the inclusion of images, whatever that means, though it has also been used to include videos. For the object element, the type attribute can be used to specify the type of embedded content, down to specific image type, e.g. type=image/gif, or it may be left open.
This implies that the object element is more flexible: you can leave the type unspecified, letting it to be specified in HTTP headers. This way, the type of the embedded data could be changed without changing the object element or the embedding document in general; e.g., you could start with a simple version where the embedded content is an image, later replaced it by an HTML document (containing an image and text for example).
The only time I've ever seen an object used to show an image is to create a "fallback" when the intended object couldn't be loaded for whatever reason. Take this example from the W3 specs:
<OBJECT title="The Earth as seen from space" classid="http://www.observer.mars/TheEarth.py">
<!-- Else, try the MPEG video -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Else, try the GIF image -->
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Else render the text -->
The <STRONG>Earth</STRONG> as seen from space.
</OBJECT>
</OBJECT>
</OBJECT>
Only ever attempting to load an image via an object is basically removing the semantic meaning off of the image, which I would consider very bad practice.
There is no good practical reason to use object instead of img. object has always been inconsistently and messily supported. Use img for images, embed for flash content, and video or audio for multimedia content. Basically the only use of object left is for invoking specific plugins.
That said, the philosophical position for object's existence is still very good. It was meant to be a generic element for any type of content which can contain nested fallback content. W3C/XHTML2 had a very idealistic roadmap for html which emphasized syntactic and semantic purity and wanted to do things like allow href on any element (eliminating a), and eliminate img in favor of object. However, browsers could never seem to get object right in a fully generic way. Additionally, it was difficult to define the js APIs for a generic object element. That's a big reason why video and audio are separate--object serving a video won't expose the js video APIs.
However, XHTML2 lost and HTML5 won and HTML5 favors img, so use img.
I came across a real-world use case for using object over img tags. I’m using PlantUML to generate SVGs that include tooltips. If I use the img tag to include the img, none of the native SVG pointer events events work. But if I use the object tag, presto - all over the onhover/mouseover behaviors work as expected.
If you're familiar with Reddit, you'll know how all of their posts containing pictures get a small thumbnail preview beside the title of the submission. How does Reddit go about doing that? Does it just check to see if the link ends with .jpg, .png, .bmp, etc?
reddit will try to pull a thumbnail from any source--not just an image URL. This is done firstly by having set rules for specific sites, and secondly by having one generic process for retrieving thumbnails for unknown URLs--and is an automated periodic task.
One of the (many) benefits of reddit is that the source code is open, and if you understand Python, you should check out /r2/lib/scraper.py for a more detailed view at how this process works.
Also, while StackOverflow is a great place to have programming-related questions answered, you might also want to check out reddit's own /r/redditdev for information on reddit development.
Indeed, if the URL contains .jpg, .png,
etc., use that.
If the site is a
popular domain (flickr.com,
youtube.com, amazon.com, etc.), have
a set of predefined rules to extract
something you know will be relevant
(may it be the featured image, YouTube
thumbnail, Amazon product image,
etc.)
Otherwise, if all you have to
work with is some HTML, you'll have to dig it out yourself. You could choose the
first one on the page, the biggest by size,
or even the one you've algorithmically
determined to be the most relevent (e.g. relatively big, inside what you think is the main body content.)
If you have to resort to the last option, one technique I'd recommend is to extract multiple images, and A/B test them to find the one which has the best click-through rate. That way you can nearly always get the best one.
You can check for the content of the <img> tag.