Detecting "Missing Video" Youtube Image - javascript

Greetings from a future caveman,
I load a lot of youtube thumbnails on my page. They load from thumbnail urls I have in my db.
From time to time the video in question is changed or deleted by the author on youtube. This leaves me with 2 problems:
I'm loading the blank picture from youtube
In my db I still have this image url listed.
What would be a solution for figuring out the "missing video" thumnail, NOT displaying it, and updating my db. I need to fire an event by recognizing this image. Note that this is the default "missing" image that can appear different urls. So it's not a simple matter of seeing a particular url.
I also thought of using youtube api but making a bunch of calls every time the page loads seems counterintuitive to me.
I need to detect the image and fire so some of even for JS/jquery to use to update my db via ajax.
Maybe I'm overthinking this so if anybody has another solution to my problem I'm open.
I have read this: Javascript - Detect Youtube Default-Thumbnail
But the solution above does not seem to fit. The first option in the answer is what I'm doing now and it doesn't work - because youtube serves the default image even when you use 1.jpg, or 2 etc.. (which is what I use). Basically the video is gone.
The second option (base 64 encoding, creating canvas element etcc) is not really expanded upon and seems rather like using a chainsaw in place of a scalpel.
Thanks

I discovered that if I'm using
http://img.youtube.com/vi/<video_id>/mqdefault.jpg
,
it will display the trimmed (no black borders at top and bottom) YouTube thumbnail. The dimensions of this are 320 x 180px.
Whereas if there is no available thumbnail, you will get YouTube's fallback thumbnail, but that is actually 120 x 90px.
So here's a much easier way for figuring out if you got an invalid thumbnail (as compared to reading base64 data from the <img> tag).
Hope this helps.

Related

Techniques for loading page with several thumbnail images (laravel 5.3)

I have a web site with a section with several small images (about 24) per page. When I visit the page I can see the page being enlarged, text is shown before the associated image and etc. That's not a problem for me, because I know that the web was designed to work this way so that web site visitors could see something before the page is fully loaded. The problem is that, today, people are fighting against this principle to achieve beauty, hiding sections of the page until it is completely loaded is common if not required. I cannot fight this (If I could I would). When I show my website to some developer I can see that he completely embranced this idea of beauty in favor of "old principles".
I never really tried to design a page that has a "smart image loading" so I don't know where to start and that's why I'm here. If you can list me some techniques, plugin and etc that can be used to perform progressive image loads in pages would be helpful.
My page is being loaded by simply returning a view with all the images. I assume that to achieve the smart image loading I will have to get the images and associanted text by returning json from the controller, is that correct? If so, I will have to make a major change in my system. I briefly saw a technique that it sets all the images on the page to an animated gif image and then when the data is fetch from the server (using ajax/json) it substitutes the src atribute of the image, is that a good technique. Again, what the best tecniques are?
You can use jquery and css to display a loading animation before the page completely loads
Tutorial: http://smallenvelop.com/display-loading-icon-page-loads-completely/
Working example : http://smallenvelop.com/demo/simple-pre-loader/
Big Company's website who uses loading animation : https://club.ubisoft.com/
Just a warning: website who uses this technique will look slower, user might even leave the website before the page loads, I personally think the default behaviour of showing text first is still the best.

What happens when you change the src of an img tag with jquery?

I tried looking this up in google but Im getting alot of turtorials on "how to" rather than what the side effects are.
When changing the src of an img, does this cause a double caching effect? What if someone had used jquery to create a slider/rotater/comic viewer/marquee/etc and had used jquery to do so?
On a mobile device, could the page stop working after the image rotates through with the device receiving some type of error similar to "page is too large?"
Could the images be cached in a way that that the browser remembers them? And by that I mean when you have an image with a specific name that you make an edit to and the browser loads a cached version of it. Could this cause false image loads if a randomizer code was placed to choose a random image?
I am just curious what kind of effects this could have on a browser by browser/visit by visit basis.
I wanted to test this, but I feel my results could be secluded or not broad enough to cover all scenarios when the knowledge may already be available.
This is purely for knowledge, not for a project. I figured someone else might wonder as well.
Updating the src attribute loads the new image.
Even though I would pre-load the image first, then replace or handle the image in that manner.
You can see a working example for both here: http://jsfiddle.net/je9w1n9m/
But I think your issue is more about how your caching headers are set-up for static content. If you have caching headers set-up right on your web server to tell the browser to cache the static content, then the image will return a 304 Not Modified response, and will be cached in the browser from the first time it loads.

how to get a list src from img tag?

I'm building a webapp using sencha touch, and I need to use some images from another website. These images are updated every 10 minutes, so the source of the images is changing all the time. So I don't have an specific url where to get the images.
Can anyone suggest a way to get the source of the images using javascript?
I tried with jsonp, but got nothing more than an error.
I will appreciate your suggestions.
There is two javascript solutions:
Ajax request to the website API
Load the page into an hidden iframe, onload, fire the update of the image, search for the source image you want in the iframe childrens, then delete the DOM of the iframe

Gray bar for image when posting to feed

When I generate a feed post using the FB.ui function I find that frequently the image I attach to the post displays as a vertical gray bar. On the other hand, if I generate my feed posts using the direct https://www.facebook.com/dialog/feed url the image works 100% of the time. If I provide the Facebook Debugger it detects it as a Photo and displays the image at the bottom. When I click the 'See exactly what our scraper sees for your URL' it says that the 'Document returned no data'. I assume this is because my image is not an open graph object? I'm very much at a loss here.
maybe try to add a random parameter after the image src like http://www.yourdomain.tld/yourimage.ext?randomnumber if Facebook tried to load that image when it didn't exists it will cache a 404 error. With a random parameter, it forces Facebook to refresh your picture.
You shouldn't provide a direct link to the image.
Utilize OpenGraph tags, e.g. share link yourwebsite.com?image=12. Use backend script to generate OG headers, namely: og:image, og:description (see http://developers.facebook.com/docs/opengraph/ for more information). This way every time someone shares the content you know what image is being displayed.
The issue was our server, it was becoming inaccessible from the outside intermittently. This was causing Facebook to cache the broken links.

How to change Image Loading Order (for Lightbox)

I've got a page with a lot of images (thumbnails). You should be able to expand the images via Lightbox. I need to encourage the browser to load the image in the Lightbox before any other image (thumbnail).
I remember some articles (I can't find anymore) on how to influence the loading mechanism of the browser (use a different subdomain to allow another thread), but I'd like to know whether there might be other options (i.e. without additional subdomains).
To clarify the issue:
Example (how I'd like it to behave)
I visit the page
I click on the 3rd picture thumbnail
The 3rd picture is shown (while the remaining thumbnails are loading)
Example (how it behaves right now)
I visit the page
I click on the 3rd picture thumbnail
A spinning wheel is shown until all thumbnails are loaded
The 3rd picture is shown
Are there any tutorials/papers/views on this issue?
Just did it with using jQuery $('<img>').attr('src', ...) in my custom queue-manager which limits the browser to load images 1-by-1 thus having the capacity to load additional images that might be showing up on the page (like the one in the lightbox).

Categories