Stop-Videos Von Spielen, Wenn Modal Schließt

Ich bin mit dem video-tag in HTML, öffnet sich in einem modalen. Derzeit ist es noch spielen, wenn ich die Ausfahrt der modalen ohne anhalten der Videos. Ich habe keine javascript noch, als alles, was ich hinzufügen funktioniert nicht. Ich bin mit bootstrap auch. Hier ist mein HTML:

<button type="button" data-toggle="modal" data-target="#myModal">
  <h4>SHORT SLEEVED SHIRT<br><br>$20</h4>
  <img src="images/femaleshortsleeved.jpg"> </button>
  <!-- Modal -->

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <video class="video" width="960px" controls>
                <source src="images/Short Sleeved Shirt.mp4" type="video/mp4">

            </video>
            <h2>Short Sleeved Shirt<br>$20</h2>
            <h5>90s lightweight brown patterned shirt.<br>No marked size.<br>Will fit S to M.<br>Length: 62cm<br>Width: 56cm</h5>
            <button type="button" class="btn btn-primary btn-lg">BUY NOW</button>
      </div>
    </div>
  </div>

Haben Sie versucht, die .pause () - Funktion auf modal entlassen?

InformationsquelleAutor cpalmer | 2015-11-02

4

Verwenden Sie die hidden.bs.modal Veranstaltung.

Dieses Ereignis wird ausgelöst, wenn das modal beendet hat, wird vor dem Benutzer verborgen (wartet auf CSS-übergänge zu vervollständigen).
```
$(function(){
    $('#myModal').modal({
        show: false
    }).on('hidden.bs.modal', function(){
        $(this).find('video')[0].pause();
    });
});
```
- Das funktioniert perfekt, danke!!!!!
InformationsquelleAutor Goran Mottram

Ohne JS, Sie können schreiben Sie einfach eine einfache onclick-Aktion vorübergehend pausieren von Videos, wenn der Benutzer in der Nähe des modalen.

onclick="document.getElementById('demoVideo').pause();"

daran zu ändern 'demoVideo' zu Ihrem eigenen #VideoID.

Komplette code :

 <a href="#myVideo"data-toggle="modal" onclick="document.getElementById('demoVideo').play();">--> Watch Video</a>
  <!-- Modal -->
 <div id="myVideo" class="modal fade" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" 
 onclick="document.getElementById('demoVideo').pause();">×</button>
                            <h4 class="modal-title">Demo Video</h4>
                        </div>
                        <div class="modal-body">
                            <video id="demoVideo" width="560" height="315" controls >
                                <source src="images/mydemovideo.mp4" type="video/mp4">
                            </video>
                        </div>
                    </div>
                </div>
            </div>

*denken Sie daran, ändern Sie die src zu Ihrem video.

InformationsquelleAutor Nana Wang

Ich hoffe das Plunker die Ihnen helfen könnte, habe ich die gleiche verwendet, um die Lösung zu erhalten.

HTML:

Autostop Videos in Geschlossenen Modal

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link rel="stylesheet" href="style.css">

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Autostop Videos in Closed Modal</h1>

    <ul class="nav" >
      <li><a href="#" data-toggle="modal" data-target="#video1">Video 1</a></li>
      <li><a href="#" data-toggle="modal" data-target="#video2">Video 2</a></li>
    </ul>

    <div class="modal fade" id="video1">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 1</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/108792063" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="video2">
      <div class="modal-dialog">
        <div class="modal-content">

          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Video 2</h4>
          </div>

          <div class="modal-body">

            <iframe src="//player.vimeo.com/video/69593757" width="500" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

          </div>
        </div>
      </div>
    </div>

  </body>

</html>

JS:

$(function(){
  $('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
  });
});

Sie kam, wie Gott,ich danke dir...u nur mich gerettet gearbeitet...

InformationsquelleAutor Bob

Dank Pinegrow - dieser arbeitete für mich:

$('.videoModal').on('hide.bs.modal', function(e) {    
var $if = $(e.delegateTarget).find('iframe');
var src = $if.attr("src");
$if.attr("src", '/empty.html');
$if.attr("src", src);
});

InformationsquelleAutor Renegade

Ersten hinzufügen einer id, um Ihre video-player wie

<video width="700" height="400" controls="controls" preload="auto" autoplay="true" id="myPlayer" name="myPlayer">
//codes..
</video>

Dann fügen Sie folgenden code zum Ereignis schließen des modal

document.getElementById("myPlayer").pause();
        document.getElementById("myPlayer").currentTime = 0;

InformationsquelleAutor jins

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.