0

I have been using the following code on my webpage for several years, but it has recently stopped working in Firefox (haven't checked other browsers):

<img src="video.MP4" onerror="this.src='vid.png';"/>

Whenever the src was a video instead of an image the onerror was triggered which displayed a standardized video image in place of the video. Most items were images and still loaded correctly, I just wanted videos to display an image instead.

Now, the browser hangs with the loading icon spinning. The network tab says loading complete, but this element does not load at all, either a placeholder or the video. Possibly it is still trying to download the video and the network tab is incorrect.

Is there any way to fallback on all non-image (particularly video) files to a default image? Thanks.

Sharky
  • 1
  • you shouldnt be using the `img` element to load videos... this is what the [`video` tag](https://www.w3schools.com/tags/tag_video.asp) is for... [here is a little tutorial](https://www.w3schools.com/html/html5_video.asp) – oldboy May 02 '19 at 02:36
  • But does the video tag load images as well? I couldn't get that to work. I need something that will load an image if the content is an image and load a fallback image if it's a video. – Sharky May 02 '19 at 02:38
  • no, i dont believe it does. the `video` tag is for videos, whereas the `img` tag is for images. you shouldnt be doing what ur doing. although your code actually works in chrome, its extremely bad practice. thats not how these languages are intended to be used, which is probably why it no longer works in firefox. and i wouldnt be surprised if it stops working on chrome one day. why dont you post a question explaining what you want to do, why you want to do it, and the way youve already tried doing it? – oldboy May 02 '19 at 02:41
  • you can the use the `poster` attribute of the `video` element to display an image, which will be displayed until the first frame of the video becomes available – oldboy May 02 '19 at 02:44
  • Please see above. – Sharky May 02 '19 at 02:45
  • BTW, that code works as you want it to work in firefox, so the issue isnt the code. – oldboy May 02 '19 at 02:48
  • Thanks, I have tried the poster tag before but as far as I can see it still requires knowledge in advance of the type of resource. – Sharky May 02 '19 at 02:48
  • It doesn't work for me in Firefox, it still hangs trying to load the file. IDK, thanks for your help. – Sharky May 02 '19 at 02:50
  • do the video and image files even exist? what version of firefox are you using? – oldboy May 02 '19 at 02:51
  • 66.0.3 (64-bit) I just verified that in works in Chrome and IE, so maybe some weird Firefox thing. – Sharky May 02 '19 at 02:53
  • im using the same version of firefox as you, and it works as you want it to for me – oldboy May 02 '19 at 02:57

1 Answers1

0

I'm pretty sure the following code will do what you want it to do, albeit I'm not sure which browsers don't support the video tag, so I haven't tested it.

The img element should be displayed as a fallback if a browser does not support the video tag. The caveat is that I'm not entirely sure whether or not the img element can be used as a fallback, although I'm not sure why it wouldn't.

<video poster='image.jpg'>
  <source src='video.mp4' type='video/mp4'>
  <img src='image.jpg' />
</video>
oldboy
  • 5,729
  • 6
  • 38
  • 86
  • This works in IE. It works in Firefox but is still trying to load the video in the background I believe since the thing is still spinning and hanging a bit. It doesn't display the fallback image in chrome though, just a white space. I think I'll just stick with my original code since it works for 2/3 and you say it even works for you in FF. Thanks. – Sharky May 02 '19 at 03:06
  • @Sharky it should work. did you change the `image.jpg` value to the path of an actual image on your computer or elsewhere? here is [one](https://stackoverflow.com/a/14617318/7543162) SO post affirming my answer, and another [one.](https://stackoverflow.com/a/15506119/7543162) this should work in both browsers that do and do not support `video`. whatever issues youre having dont seem to be related to the code lol – oldboy May 02 '19 at 03:22