Multiple HTML5 Video Tags on 1 page

I have a web page where the top of the page is a fullscreen div with a background of a video. I also have, further down the page another video (for testing purposes the same video).

I have an interesting scenario to figure out...

• Video 1 (at the top of the page) works perfectly on Firefox, Safari, Chrome, IE


• Video 2 (half way down the page) works great on Firefox, Safari and IE. NOT Chrome

Due to the nature of my job I have to ensure that the websites I develop are browser safe. Does anyone know why 1 video would be working in Chrome but the other won't?

AT TOP OF PAGE

<video id="video" poster="img/poster.png" loop muted class="video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
    <source src='img/video.mp4' type="video/mp4"/>
</video>

HALF WAY DOWN PAGE

<video  id="s-video" poster="img/poster.png" loop muted class="bg_video video-js vjs-default-skin" preload="none" width="100%" height="100%" data-setup="{}">
    <source src="img/video.mp4" type="video/mp4" />
</video>

I also have this bit of DOM Javascript at the bottom of my page

<script>
    document.getElementById('video').play();
    document.getElementById('s-video').play();
</script>