I am working with a loading gif on a website and it works correctly on all browsers except Microsoft edge. With edge, the gif runs all the way through the loading circle, but at what I assume is the last frame*, a sliver of the gif freezes and stays there as the gif continues to play through again. Once it happens one time, it will continue to happen until the user leaves the page. I can't put up a link to show the actual gif I am struggling with,
however I just created something quickly in paint.net and threw it into an online animation tool to show what it is doing.
https://giphy.com/gifs/QsUAu5ud4ibIdq97sm
So with this quick gif I just created, once that red mark shows up, it will show up every time after the initial load of the gif.
*I am just assuming it is the last frame but I can not access a copy of the gif before it was compiled into gif format so I don't know how much of the loading animation is in each frame
What I am asking is if anyone knows how to fix this issue when using edge. I am limited because I cannot change the gif itself in anyway or change
the frame rate of the gif. Any ideas are welcome because I am all out of ideas and have spent hours scrolling through
pages online looking for a solution and haven't come across anything close to what is happening here.
Also this is how the gif is being created on the page with the html. Not sure if this is helpful in this case or not:
<div style="text-align:center">
<img src="~/Content/images/GIF-loading.gif" id="loadingGif" />
</div>
I have tried to create a sample using your code and download a loading image from here, it seems that it works well on Microsoft Edge 44 and Edge 42, the result like this. So, I think you could try to download a new loading image and retest it on your side.
Related
Hello to all I am new to the community, and it comes because I have a big doubt this doubt I've had for a year and I can not get someone to explain me correctly, well getting to the point, I have a website that I created recently but I see that when I place an image or an object when I move the window of my browser everything is deformed, then I discovered a long time ago that to not deform the images or objects I have to make it adapt to any screen, I looked for many tutorials but none worked for me, I work with wordpress, then I want to know how I can do it using the wordpress console, I will attach some pictures.enter image description here
enter image description here
Use Position Property. Place the image and Blue Background inside a div tag with Relative Parent and set top or bottom and Left or right values.
In the app I have a UICollectionView with item size so that about ~20 items are visible on the screen at the same time. The content that I want to display in each cell is Gif image downloaded from Giphy / Tenor.
However, I realized that gif files take much more space (and time to load) than the relative mp4 files that both Tenor and Giphy provide for each animated image, which is actually obvious, cause mp4 file format has a compressing logic and stuff like that. Sorry if I use wrong terms.
In order to have list loaded faster I decided to switch using UIImageView with GIF images to AVPlayerLayer, cause mp4 file is like ~10x lighter than GIF image. But I faced with the performance issue similar to what described HERE. The flow is mostly the same, I have 20+ items visible at the same time, but because of hardware limitations it only shows 16 videos. I couldn't find any workaround or any other frameworks that would allow to have more than 16 AVPlayerLayer showing video at the same time.
I'm wondering how WhatsApp application works and handles this logic. It also has GIF selection from Tenor. I already checked and figured out that WhatsApp downloads small video files and not gif images. That's why it loads very fast. But I have no idea how they can show 20+ items at the same time. HERE is how that works in WhatsApp - https://media.giphy.com/media/33E84h3RAVn0vQWZak/giphy.gif. Also, I notices during scroll the small static previews are showing, but I don't see the app making requests for it. Probably they gets a first frame of the gif on the fly without any delays in main thread.
I also tried that, but even if I make every single stuff in background thread and the only line on the main thread is "self.imageView.image = myImage", it anyway is lugging a little bit if I have 8 items in the row for example and scrolling very fast.
I see only 2 possible solutions to have it loads fast (so we definitely need to load mp4 instead of gifs), and scroll smooth and without lugs:
1. WhatsApp uses its own custom Video Core to display video in the UICollectionViewCell .
2. WhatsApp downloads video to speed up the download process but then encodes mp4 file to gif one on the fly and use regular animated UIImageView to show the output gif file. However I was not able to have this flow working very fast without lugging during 'massive' scrolling
Any thoughts on how to implement the same to make it works fast and smooth as in WhatsApp? I'm unable to check how it handles the downloaded info, but for sure it downloads mp4 files and not gif ones.
I have an cordova ios application where I show a different gif upon swipe up and swipe up.
But when I swipe up the first gif the second gif doesn't start playing properly from it's first frame like it should.
Instead the second gif shows the last frame of the second gif first and then only it starts playing.
Please see the attached gif herewith.
Because of this it creates an ugly flicker on each image swipe up on the ipad app.
Could someone please point me out what I am doing wrong or what should I be doing differently to fix this issue ?.
I am tesing using ios 9.1.
I think I have a partial answer.
My problem resulted from splitting one rendered image sequence from After Effects into multiple animated gifs in Photoshop.
I think it must have something to do with the way the images are referenced in the image sequence that messes up the final animated gif. Possibly because it loses information about which images are first or last in the process.
I fixed the problem by rendering each image sequence separately then opening each image sequence in Photoshop and saving them as animated gifs separately as well.
I'd like to be able to view my playlist in vlc in a manner where it is non-obtrusive. Currently it looks something like this:
My desire is kind of the opposite - have the actual video playing take up the majority of the screen and have the playlist unobtrusively off to the side (actually in reality I would probably be happy with an undocked playlist except for this bug.
I'm aware there is a hidden resizer between the video and the media sources thing, but in the image shown I cannot resize the video portion any larger than that.
I know this is a late response, but if anyone else is looking for an answer to this problem like I was, I'd like to spare them the headache of searching any further than necessary for it.
Juidging by this post on VideoLAN's forum made by the site administrator (Jean-Baptiste Kempf), this seems to be working as intended.
Yes, there is no way to have that mode. Either it's two windows, or you just have the preview instead of the thumbnail.
(my emphasis)
This is, in my opinion, a silly limitation/feature to have.
EDIT 2019:
It seems to now be possible to achieve what the OP wants. Just drag the top part of the video up and the navigation will get hidden, you'll see a vertical resize icon replacing the pointer icon when you hover over the line between the navigation and the video. This at least works on my version of VLC (Version 3.0.7.1) on Windows 10
I don't know when this was implemented but I'd feel very silly if I didn't try this before originally posting this answer.
I've been working on an iPad-specific site that uses HTML5 video and though I've got video playback working, I can't for the life of me get the poster image to appear. It looks fine on Desktop Safari. Here's the code:
<video src="video/about_the_man.mp4" controls height=360 width=480 poster="video/posters/about_the_man.jpg"></video>
I've using this link as a reference (listing 1.2): https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6
It says that on iOS the poster image will be shown until the user initiates playback, but right now all I'm getting is a black video-sized screen with a big play button in the center. I've looked at other postings on this top (here and here) but neither solution has worked for me. The only thing that's a little bit unconventional about the site is that the video element is in an inline lightbox, so initially on pageload it's not visible, but I don't know why that would make a difference.
I had the exact same problem. I decided to try my code on other iPad's, and it worked fine. The poster image showed up.
After scratching my head for a bit, the solution was to hard reset the iPad and try again. After a reboot, my iPad displayed the poster image as it should.
Maybe it will work for you?
I found there is a limit to the amount of images you can load on an iPad
Here is what it says:
I hit a mobile Safari limitation recently when building an AJAX-y site
on the iPad. If you load a ton of images eventually mobile Safari cuts
you off and will display a [?] instead of the image. After doing some
tests it appears that this limit is around 6.5 MB. Here’s a test page
I made that attempts to load 20 500kb images. When opening this page
on an iPad, 7 of the images don’t appear, even though in Charles they
are returning 200 – success. I’m assuming this is similar to the way
autoplay is disabled for the video tag on iPad/iPhone. Apple probably
wants to make sure users don’t get overloaded with downloads when
browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation.
Here’s another test page using the canvas tag, all the images should load.