HTML5, Video tag and IE 'Invalid Source'

Question

The below code relates to a video file saved in both webm and mp4 format on my laptop. When I 'run' what I have written so far in my experimental coding, the video plays fine in Chrome, but in IE I get the message 'Invalid Source'.

<video poster="file:///D:/TouchofClass/images/Nuts.jpg" 
    width="450" height="325"
    preload="none"
    controls="controls">
        <source src="file:///D:/TouchofClass/images/eh5v.files/html5video/Cheesy.mp4"/>
        <source src="file:///D:/TouchofClass/images/eh5v.files/html5video/Cheesy.webm"/>
    </video>

First, Internet Explorer cannot play .webm files. Also, the <source> tag does not use or need a closing slash. — Rob
if you are loading the page itself via http:// then the path to video must match. Have you tried to open the mp4 video directly in IE? — Offbeatmammal

Harry Harry · Accepted Answer · 2017-10-29T10:59:04

As @Offbeatmammal says, if you run your webpage from a webserver instead of opening it as local file, your video will not be loaded from local drives. You'd need to put it to a webserver and load it with http:// prefix instead of file://

Edit: as @Rob says, IE and edge do not support Webm by default, you need to install the codecs for it: https://tools.google.com/dlpage/webmmf

HTML5, Video tag and IE 'Invalid Source'

1 Answers