HTML video will not play in Microsoft EDGE

Question

I have the following video in my site. This is set as a fixed background at the top of the page, comprising the main banner. This element plays fine in every browser except EDGE.

I even tried writing a custom javascript snippet to force it to play (called with a button). This works when tested on Chrome but will not work on EDGE.

var vid = document.querySelector('#bgvid');

function playVideo() {
    console.log('trying to play!')
    vid.play();
};

<video poster="http://cranneyhomeservices.com/wp-content/uploads/2017/05/HS_Loop_Frame.png" id="bgvid" playsinline autoplay muted loop>
  <source src="http://cranneyhomeservices.com/Cranney-website.mp4" type="video/mp4" media="all and (max-width:414px)">
</video>

the console.log works just fine in EDGE, but the second line does nothing — Vladimir Mujakovic, Jan 18 '18 at 19:08
does changing `var vid = document.querySelector('#bgvid');` to `var vid = document.getElementById('bgvid');` make a difference? — messerbill, Jan 18 '18 at 19:11
so please provide a jsfiddle and post the link. I will have a look — messerbill, Jan 18 '18 at 19:16
seems to be a security issue in my edge. `SEC7111: HTTPS-Sicherheit beeinträchtigt durch http://cranneyhomeservices.com/Cranney-website.mp4` (this is german, but it is a HTTPS Security error which interrupts the script at my place) - https://jsfiddle.net/ath5s7fw/3/ — messerbill, Jan 18 '18 at 19:32
but weirdley it works in my edge if i just wait for a while....Try to fix this error, this should do the job — messerbill, Jan 18 '18 at 19:41

messerbill · Answer 1 · 2018-01-18T19:34:35.827

1

According to my comment you should use getElementById() instead of querySelector(). This should be correctly interpreted by chrome and edge.

Edit:

After testing your fiddle in my Edge it is an security issue. The problem was already discussed on SO:

HTTPS security is compromised error. How to fix?

Make sure that you do not load any content from a non secure source (i.e. https instead of http)

edited Jan 18 '18 at 19:34

answered Jan 18 '18 at 19:13

messerbill

5,499
1
27
38

unfortunately it will not work, what i would really like is for it to autoplay as implied in the tag. The fact that the function wont work is a secondary concern, I just wanted to see if I could force it with JavaScript. – Vladimir Mujakovic Jan 18 '18 at 19:28

HTML video will not play in Microsoft EDGE

1 Answers1