Automatisch pauzeren video in dialoogvenster

[mdeb]

Ik heb voor mijn website een dialoogvenster gemaakt met hierin een video en commentaar eronder. Het dialoogvenster en de video worden goed weergegeven en als ik op het sluitknopje druk wordt de video gepauzeerd. Wanneer er echter naast het dialoogvenster geklikt wordt, sluit het dialoogvenster maar de video blijft op de achtergrond afspelen. Hoe kan ik ervoor zorgen dat de video gepauzeerd wordt wanneer het dialoogvenster niet zichtbaar is?

code:

<section>
    <div id="dialogVisualisatie" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dialogVisualisatieLabel" aria-hidden="true">
        <div class="modal-header"> <button type="button" onclick="pause('video_visualisatie')" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="dialogVisualisatieLabel">Visualisatie</h3>
        </div>
        <div class="modal-body">
            <video id="video_visualisatie" width="520" height="215" controls>
              <source src="videos/visualisatie.mp4" type="video/mp4">
              <source src="videos/visualisatie.webm" type="video/webm">
              Uw browser ondersteund deze video niet. 
            </video>
          <br>
          <br>
          <p>tekst</p>
        </div>
        <div class="modal-footer"> <button class="btn" onclick="pause('video_visualisatie')" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
      </div>
    </section>

    <script> 
    function pause(id)
    {
        var myVideo=document.getElementById(id); 
          myVideo.pause(); 
    }
    </script>

[Bosmonster]

Dat hangt er nogal vanaf hoe je dialoogvenster code in elkaar zit. Daar zul je het pauzeren aan het sluit-event moeten hangen.

ps. Zet je code in de daarvoor bedoelde code-tags, das een stuk leesbaarder.

[ Voor 24% gewijzigd door Bosmonster op 27-09-2013 15:03 ]