Avoir un problème avec HTML audio/vidéo

Question

fondamentalement ce que j'essaie de réaliser est ce lecteur audio en HTML jouer l'audio et la vidéo lorsque le bouton de lecture est cliqué et vice versa pour une pause. C'est mon 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> 

Toute aide est grandement appréciée, merci.

Answer 1

Il est préférable décrit par exemple: http://jsbin.com/zivak/1/edit

Je crée une balise vidéo et une étiquette audio, et un bouton avec onClick de liaison d'. À des fins éducatives, j'ai laissé les contrôles visibles, mais ils devraient être cachés car ils vont altérer votre état.

En cliquant sur le bouton, les éléments sont récupérés à partir du DOM puis play() ed, si elle est en pause, et pause(), sinon.

Gardez à l'esprit que onClick est à sens unique, pour ainsi dire ...

---

MISE À JOUR: Oui, cela est possible, bien qu'il se complique puisque les deux balises pourraient avoir à tampon indepentently , et vous devez prendre soin de synchroniser cela. Ce n'est en aucun cas facile ... mais comment est-ce que vous y avez pensé?

---

MISE À JOUR: Si vous voulez dire « couper le son, laissez la vidéo sur », alors non. Si vous voulez dire "couper l'audio, couper la vidéo", oui, c'est en fait assez facile: http://jsbin.com/zivak/5/edit.

Answer 2

essayez ceci:

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