Having an issue with HTML audio/video - html

Question

basically what I am trying to achieve is this audio player in HTML play the audio and the video when the play button is clicked and vise versa for pause. This is my code.
<div style="text-align:center">
<img src="img/playpause.jpg" onclick="playPause()">
<br>
<video id="video1" width="1200" >
<source src="pjds.mp4" type="video/mp4">
<source src="pjds.ogg" type="video/ogg">
Oops, your browser doesn't support me :(
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
</script>
<audio controls>
<source src="ay.ogg" type="audio/ogg" onclick="playPause()">
<source src="ay.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Any help is greatly appreciated, thanks.

Answer 1

It's best described by example: http://jsbin.com/zivak/1/edit
I set up a video tag and an audio tag, and a button with onClick-binding. For educational purposes I left the controls visible, but they should be hidden as they will tamper with your state.
Upon clicking the button the elements are retrieved from the DOM and then play()ed, if paused, and pause(), otherwise.
Keep in mind that onClick is one-way, so to speak...
UPDATE: Yes, that is possible, although it will get complicated since both tags might have to buffer indepentently, and you have to take care to synchronize that. It's by no means easy... but is http://jsbin.com/zivak/4/edit how you thought about it?
UPDATE: If you mean "mute the audio, leave the video on", then no. If you mean "mute the audio, mute the video", yes, this is actually quite easy: http://jsbin.com/zivak/5/edit .

Answer 2

try this:
var myVideo = document.querySelector("video1");
if (myVideo.get(0).paused) {
myVideo.get(0).play();
}
else {
myVideo.get(0).pause();
}