MP4 Video not playing in Chrome

scaredofdebt

Hi,

Not sure if anyone can help but I have trawled the net without much success.

I am building a website with an embedded MP4 video in a slider, it works OK in Firefox and IE but not Chrome, I have tested in on a laptop, desktop and phone so I know the issue is Chrome.

Any ideas?

I'm not allowed to post links am I?

OK so I am thanks:

http://sweeneydogkr.co.uk/video.html

Cheers for any ideas, workarounds etc.

AndyPix

You can post links - lets have a look

scaredofdebt

Oh, you may need to scroll right as the first thing in the slider is an image, the video should autoplay.

AndyPix

Ok, so your video is there , the issue is that it is not autoplaying ..


I have seen this before in HTML5 and chrome not listening to the autoplay flag here ..





Try a little javascript to make it autoplay ..


Directly after you close the video tag, add this line


<script> document.getElementById('asvideo0').play(); </script>


That should sort you out . If not, then get on google and research the fact that chrome doesnt like autoplaying videos that are not muted - so you may need to add some tags to mute the video (even if it doesnt have sound !!)

scaredofdebt

Thanks AndyPix, appreciate the help, unfortunately your idea just gives a blank white screen.


But you did give me some other ideas, so far I've got it so Chrome does now show the video but it doesn't autploay it, I've raised this on the Google developers forum but no response as yet.

AndyPix

Thats strange ..
You added the line directly after the </video> tag ?


have you added mute tags like i suggested ? you should add "playsinline" and "muted"


Chrome will not autoplay videos unless they are muted

scaredofdebt

Yes, this is the code:


<video playsinline autoplay muted controls loop>
<source src="images/sweeneydog.mp4" type="video/mp4">


Your browser does not support the video tag. But you could include an iframe/embeded video here.
</video>
<script> document.getElementById('asvideo0').play(); </script>


I've put it back in if you want to look at the white screen.

scaredofdebt

OK so this fixed it, thanks to Stackoverflow:


</body>

<script>
var myVideo = document.getElementById("myVideo");
setTimeout(() => {
myVideo.play();
}, 1000);
</script>
</html>


Called the video id "myVideo"


Appreciate your help Andy.

AndyPix

scaredofdebt wrote: »

Yes, this is the code:


<video playsinline autoplay muted controls loop>
<source src="images/sweeneydog.mp4" type="video/mp4">


Your browser does not support the video tag. But you could include an iframe/embeded video here.
</video>
<script> document.getElementById('asvideo0').play(); </script>


I've put it back in if you want to look at the white screen.

Yeah - the problem was that you werent tagging your video with an ID , so the script didnt know what element you were referring to.
in your video tag, you should have had id="asvideo0" like in my code snippet and it would have worked.


Anyway you're sorted now - nice work


(I still think my one liner is better than abstracting it though )

AndyPix

Oh, and you also want ..


document.getElementById("myVideo").controls = false;


So the controls dont appear when you hovver the mouse over the video

scaredofdebt

Thanks, yes Javascript isn't my strong point!