This question already has answers here:
Angular2: Show placeholder image if img src is not valid
(9 answers)
Closed 2 years ago.
I was trying to use onerror. Whenever image is not found in the folder it displays a placeholder. My image path is dynamic and comes from backend. Below is how I used it.
<img class="" src="{{imagePath}}my_image.jpg" onerror="this.src='{{imagePath}}placeholder.jpg';" alt="Image not found">
But this is not working and giving error.
For this I used to use picture tag, browsers will try first source, then second, if browser don't have picture interpreter will use img tag.
Like this:
<picture>
<source alt="Special Days" srcset="[First Image route].jpg" type="image/jpeg">
<source alt="Special Days" srcset="[Second Image route].jpg" type="image/jpeg">
<img alt="Imagen" src="[First Image route].jpg">
</picture>
Related
This question already has answers here:
How to use querySelectorAll only for elements that have a specific attribute set?
(3 answers)
Closed last month.
is there any way to hide all images, that use referrerpolicy="unsafe-url"?
I know how to get images by class or id. But I didnt find referrerpolicy.
I would like to add a class to all images on a page having referrerpolicy="unsafe-url" in it.
<img referrerpolicy="unsafe-url" src='...'>
And after:
<img referrerpolicy="unsafe-url" class='hidden' src='...'>
Thanks for any hint.
try that but in your browser, I tested it in chrome, firefox, it's ok. Here in snippet not.
Array.from(document.querySelectorAll('img')).forEach(el=> {
if (el.referrerPolicy==='unsafe-url') {
el.style.display='none';
}
}
)
<img referrerpolicy="unsafe-url" src='https://picsum.photos/id/20/800/600'>
<img referrerpolicy="unsafe-url" src='https://picsum.photos/id/20/800/600'>
<img referrerpolicy="unsafe-url" src='https://picsum.photos/id/20/800/600'>
<img referrerpolicy="no-referrer" src='https://picsum.photos/id/20/800/600'>
I'm trying to display many video thumbnails/posters without actually loading the video...
Bascially what I've got is the following:
<div class="col-sm-3" style="padding: 20px;" onclick='location.href="/videoDetails/{{ #video.ID }}"'>
<video width="100%" style="cursor:pointer;"
<source src="/{{ #video.path }}">
Your browser does not support the video tag.
</video>
</div>
That hole thing is in a foreach loop and with that, it loads up to 100 videos on one page...
My problem now is that this gets super slow, the more videos there are load at once..
Now I found this answer on a StackOverflow thread, where it says to use the attribute preload="none" on the video tag... That seems to speed up the loading (because it doesn't preload the videos), however, it doesn't display any image (preview) at all..
In my case, there's no reason to load the hole video though, because (as you can see in the code), the actual video is then displayed on another page, when clicking on the div.
Also, just to make sure you got me right, I want to display the auto generated preview of the first frame of the video. I can't upload a seperate image to display it with the poster attribute, it has to be the default image..
Is there any way I can achieve this? I'm also open to Javascript/jQuery solutions...
You can get video frames in different time periods with append #t in the video source url. But with the attribute preload none value you cannot get the video frames. So You need to use the metadata value in the preload attribute.
These are the three values you can use in the preload attribute:
none - Hints to the browser that the user likely will not watch the video, or that minimizing unnecessary traffic is desirable.
metadata - Hints to the browser that the user is not expected to need the video, but that fetching its metadata (dimensions, first frame, tracklist, duration, and so on) is desirable.
auto - Hints to the browser that optimistically downloading the entire video is considered desirable. - Hints to the browser that optimistically downloading the entire video are considered desirable.
You can check the below results with these three values.
<p>metadata</p>
<video width="300" height="150" controls="controls" preload="metadata">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>none</p>
<video width="300" height="150" controls="controls" preload="none">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
<p>auto</p>
<video width="300" height="150" controls="controls" preload="auto">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4#t=2" type="video/mp4" />
</video>
I would say that creating so many video HTML elements will affect performance anyhow, loading or not, since the DOM is under quite heavy pressure.
A different (and more advance) approach I would recommend is the following.
If you want that one image will load when the user clicks on it, you can "create" a video in that specific moment, triggering only the video requested.
So:
instead of the video tag, load an image with onclick listener, that will pass an ID to a JS function
when the user clicks it will create the video element.
at the same time, hide the image (or maybe a gif?)
Try to run the snippet here below :)
function myFunction(id) {
var element = document.getElementById(id);
var videlem = document.createElement("video");
element.innerHTML = '';
source = 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4';
var sourceMP4 = document.createElement("source");
sourceMP4.type = "video/mp4";
sourceMP4.src = source;
videlem.appendChild(sourceMP4);
videlem.autoplay = true;
element.appendChild(videlem);
}
<p>Click on the image</p>
<div id="img242">
<img onclick="myFunction('img242')" src="https://blog.majestic.com/wp-content/uploads/2010/10/Video-Icon-crop.png">
</div>
I have a special requirement with html5 <video>, I hope, you guys can help me out.
Is it possible to add a <div>,<p> or something above the html5 <video> object?
Plus Trigger the PlayState of the Video and hide it, and show it after the video is stopped?
This is the Poster:
eg:
<video width="280" height="158" poster="img/thumb.png" controls>
<source src="TestVideo1.mp4" type="video/mp4">
Get a new Browser my friend
<h1>Title</h1>
<p>Some Description</p>
</video>
And is should look like this
Is there any possible way to do this?
Thank You
Note:
I have read this post Overlaying a DIV On Top Of HTML 5 Video but it didn't helped.
Images:
Poster
http://i.stack.imgur.com/vA1zn.png
It should be like this:
http://i.stack.imgur.com/qsZaI.png
You are going to have to use a combination of the canvas tag and javascript to get what you want.
Try taking a look at these two articles for a start:
video + canvas = magic
Using CSS3 and Jquery to create a custom HTML5 Player
This question already has answers here:
How to save a base64 image to user's disk using JavaScript?
(4 answers)
How to save an image via JavaScript
(3 answers)
Closed 9 years ago.
How can I trigger a "Save Image As" action when an image is clicked?
You can do it using HTML5's download attribute and no jQuery with:
<a href="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" download>
<img src="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" alt="Smiley face">
</a>
You can also declare the filename if you would like it to take a name other than default:
<a href="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" download="fileName.jpg">
<img src="http://farm3.staticflickr.com/2881/10000610654_fdf29eb02f_q.jpg" alt="Smiley face">
</a>
I have html img list like this one:
<img src="over.png" width="150" heigh="72" />
<img src="2_over.png" width="150" heigh="72" />
<img src="3_over.png" width="150" heigh="72" />
but these images are quite large. I need to make it that it will load one by one "like ajax". But I cant load it from javascript in the begining, becouse it is our cms desing like that and we will have big troubles if i will change it. So what i am planning to do is:
<img src="" width="150" heigh="72" path="over.png" />
and load it one by one with javascript and replace src, but the html will not be valid. Can any one give me any solution how to implement it with valid html?
If putting the data somewhere is your sole problem, HTML5 supports data- attributes, which let you add arbitrary attributes to elements. It remains valid as long as the attribute name starts with data-. For instance:
<img src="" width="150" height="72" data-path="over.png" />
This feature, while not "valid" HTML4, should still work on all browsers as unknown attributes on tags are simply ignored (and kept as is).
Though, you may also search for a way to do it only with JavaScript. I don't really understand how dynamically adding images could break your CMS.
Also, the alt attribute is required for images (make it blank if you don't have anything useful to write instead), and I'm not sure a blank src attribute is valid (you may want to put a loading image's path instead).
set a valid url in the image before you call the javascript function, for instance like this:
<img src="blank.gif" alt="Blank Image" width="10" height="10" />
And as for the "path" attribute, you could put the link to the image in the alt attribute. That way your image tag will be valid.
<img src="blank.gif" alt="myImage.jpg" width="10" height="10" />
Then you can use javascript to fetch the image path from the alt attribute, and insert it in the src attribute when loaded.
Those images should be thumbnails, correct? So you're downscaling large images via HTML to small sizes. The best way would be, honestly, to provide already downscaled images as thumbnails.
One solution is to have a small image loading image and set that as the source for all the images until your javascript has loaded the relevant image.
<img src="loading.png" data-path="over.png" height="50" alt="Over" width="150">
You may want to check out JAIL, the jQuery Asynchronous Image Loader:
While it may be slightly more than what you need, its got lots of options available and its less code you have to write!