CODEWITHSUNDEEP
csshtml
Sam
Sam

Reputation: 165

HTML5 Video - Fallback Linked Image

I'm looking to display a linked image to show when my video isn't compatible.

My code is as follows:

<video controls poster="/sites/default/files/image/CRM-Systems-Video.png">
  <source src="/sites/default/files/image/CRM-Systems-Video.ogv" type="video/ogg">
  <source src="/sites/default/files/image/CRM-Systems-Video.mp4" type="video/mp4">
<a href="http://content.workbooks.com/free-trial-workbooks-crm?utm_source=Homepage&utm_medium=laptopimage&utm_campaign=laptophomepage">  
  <img src="http://www.workbooks.com/sites/default/files/image/crm-system-image.png" title="CRM System image">
  </a>
</video>

However when I use Browser Stack to test IE8 (non compatible with <video>) no image is shown? Is this due to the link?

Browser shots link: http://www.browserstack.com/screenshots/663ccadc9d1c2a3aa880fb4e1ef111c4eb386c79

Upvotes: 1

Views: 187

Answers (1)

somethinghere
somethinghere

Reputation: 17358

Adding the following to the start of your <head> will do it:

<script type="text/javascript">
document.createElement("video");
</script>

This tricks IE8 into recognising the <video> element, as IE does not display any tags it does not recognise. I tested this and the link appeared, although <source> files are ignored.

Heres an example (you should see nothing on modern browsers, but browsers lacking video support will display a text):

<script type="text/javascript">
document.createElement("video");
</script>
<video>
<a href="#">You are on an older browser</a>
</video>

Upvotes: 1

Related Questions