how to enable play on two videos at the same time with html5 <button> tag

Question

any idea how to carry out the following?

<video src="video1.ogv" id="ve1" controls>
Your browser does not support HTML5 video.
</video>

<video src="video1.ogv" id="ve2" controls>
Your browser does not support HTML5 video.
</video>

<button onclick="document.getElementById('ve1').play()">
Play</button>

I have two videos with id's 've1' and 've2' respectively. At the moment the code above for the button will enable play on 've1' when pressed! Any simple way of enabling play on both videos. I have tried altering the code within the button tag with no success as of yet.

Answer 1

You could simply change the onclick value to:

onclick="document.getElementById('ve1').play();document.getElementById('ve2').play();"

But it might be cleaner to move it into a separate JavaScript function which sets the play going and calls that:

onclick="playVideos"

And:

<script>
function playVideos() {
   document.getElementById('ve1').play();
   document.getElementById('ve2').play();
}
</script>