41

私はJavaScriptに非常に慣れていないため、Twitterのブートストラップを使用して、見栄えの良いWebサイトをすばやく起動して実行しようとしています。これが jquery と関係があることはわかっていますが、閉じるボタンまたは閉じるアイコンを押したときにビデオを停止する方法がわかりません。

ウィンドウを閉じてもバックグラウンドでまだ聞こえるので、ビデオの再生を停止する方法を誰か説明してもらえますか? 

<!-- Button to trigger modal -->
    <a href="#myModal" role="button" class="btn" data-toggle="modal"><img src="img/play.png"></a>

<!-- Modal -->
  <div id="myModal" class="modal hide fade" tabindex="-1" role=labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria>×</button>
      <h3 id="myModalLabel">I am the header</h3>
    </div>
    <div class="modal-body">
      <p><iframe width="100%" height="315" src="http:com/embed/662KGcqjT5Q" frameborder="0" allowfullscreen></iframe></p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
4

22 に答える 22

42

これを行う適切な方法があります。この投稿に対する承認された回答のコメントを参照してください。

しかし、自分自身で初めてそれを機能させることができず、急いでいたので、トリックを行うかなり恐ろしいハックコードを実行しました。

このスニペットは、埋め込み iframe の src を「更新」し、リロードさせます。

jQuery(".modal-backdrop, #myModal .close, #myModal .btn").live("click", function() {
        jQuery("#myModal iframe").attr("src", jQuery("#myModal iframe").attr("src"));
});
于 2012-12-10T11:14:51.010 に答える
19

誰かがまだ問題を抱えている場合は、これを試してください。

$(document).ready(function(){
    $('.modal').each(function(){
            var src = $(this).find('iframe').attr('src');

        $(this).on('click', function(){

            $(this).find('iframe').attr('src', '');
            $(this).find('iframe').attr('src', src);

        });
    });
});
于 2013-11-15T15:07:33.737 に答える
13

モーダルウィンドウでビデオを再生し、閉じると再生を停止する簡単な方法を次に示します。

モーダルが表示されている場合は .html を使用して、ビデオを含む iFrame を modal-body にロードし、非表示の場合は modal-body を何も置き換えません。

$('#myModal').on('show', function () { 
 $('div.modal-body').html('YouTube iFrame goes here');  
});
$('#myModal').on('hide', function () {
 $('div.modal-body').html('');
});

jsfiddle の例を次に示します。

http://jsfiddle.net/WrrM3/87/

于 2013-01-30T17:28:23.680 に答える
6

最初に iframe src を空にしてから、再度設定する必要があります。

だから私の実用的な答え：

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

2014 年 10 月。Bootstrap 3 用。

于 2014-10-09T14:43:38.680 に答える
4

これが私の解決策です。ブートストラップイベント呼び出しを使用して以下を解決します:

  1. モーダル表示時にムービーを自動再生
  2. モーダルが非表示のときにムービーを停止する

モーダル内のHTMLカルーセル、最初のアクティブなアイテムは iframe ビデオ

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <div class="fill">
                                <iframe id="videoIframe" width="100%" height="100%" src="https://www.youtube.com/embed/UVAjm8b7YFg?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

モーダル表示時にJavascriptを自動再生し、URLをリセットして再度iframe srcに適用する

$('#myModal').on('show.bs.modal', function() {
    $("#videoIframe")[0].src += "&autoplay=1";
});
$('#myModal').on('hidden.bs.modal', function(e) {
    var rawVideoURL = $("#videoIframe")[0].src;
    rawVideoURL = rawVideoURL.replace("&autoplay=1", "");
    $("#videoIframe")[0].src = rawVideoURL;
});
于 2016-07-21T16:26:31.190 に答える
1

これに対する私の解決策とBootstrap 3最新の YouTubeembed形式は次のとおりです。

あなたの動画が を含む標準に埋め込まれていると仮定するBootstrap 3 Modalとid="#video-modal"、この単純な Javascript でうまくいきます。

$(document).ready(function(){
  $("#video-modal").on('hide.bs.modal', function(evt){
    var player = $(evt.target).find('iframe'),
        vidSrc = player.prop('src');
    player.prop('src', ''); // to force it to pause
    player.prop('src', vidSrc);
  });
});

の使用に関するこの問題の解決策の提案を見てきましたYouTube APIが、あなたのサイトがサイトではない場合https、または YouTube が推奨する最新の形式を使用してビデオが埋め込まれている場合、またはno-cookiesオプションが設定されている場合、それらの解決策はありません。動作すると、ビデオの代わりに「テレビがデッド チャンネルに設定された」効果が得られます。

私が手に入れることができるすべてのブラウザで上記をテストしましたが、非常に確実に動作します。

于 2014-05-29T08:12:28.420 に答える
1

上記の Guille の回答を拡張すると、これは 8 月 14 日の時点での youtube の最新バージョンである Bootstrap 3 で動作するドロップイン関数であり、1 つのページで複数のビデオ / モーダルに対して動作 します。

$(".modal").on('hidden.bs.modal', function(e) {
    $iframe = $(this).find( "iframe" );
    $iframe.attr("src", $iframe.attr("src"));
});
于 2014-08-26T11:30:36.117 に答える
1

7年後、私たちはまだこれを解決する必要があります.

それを修正するための最良の方法を見つけました（RobCalvert123の回答に触発されました）

  jQuery(".modal-backdrop, .modal.open .close,.modal.open .btn").live("click", function() {  
         // Get iframe opened 
         var iframe_open = jQuery('.modal.open');     
         // Get src from opened iframe 
         var src = iframe_open.attr('src');
         // replace src by src to stop it that's the tips
        iframe_open.attr("src", src);
});
于 2019-05-31T15:06:15.873 に答える
0 
$('#myModal').on('hide', function () {
    $('#video_player')[0].stopVideo();
})
于 2012-12-10T14:49:50.357 に答える
0

@guillesalazaar の回答は私の修正の前半にすぎなかったので、将来誰かに役立つ場合に備えて状況を共有せざるを得ないと感じました。私も埋め込まれたYouTubeビデオを持っていますが、フレームがロードされたときに自動的に再生されるように設定しautoplay=1ました. ページ読み込み時の自動再生の問題を回避するために、クリック ハンドラーを使用して iframe ソースを設定する変数に YouTube の URL を保存しています。これを解決するために、属性ソース リンクを単純に削除しました。

モーダルウィンドウをトリガーする私の URL:

   <div id="movieClick" class="text-center winner"> 
<a href="#" data-toggle="modal" data-keyboard="true" data-target="#movie">
    </div>

私の隠されたモーダルウィンドウのdiv:

<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
    <div class="modal-dialog">

<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">They Live (1988)</h4>
    </div>
     <div class="modal-body">
        <iframe id="onscreen" width="100%" height="460px" src="" frameborder="0" allowfullscreen></iframe>

      </div>
</div>

</div>
</div>

私のJS：

$("#movieClick").click(function(){
var theLink  = "https://www.youtube.com/embed/Wp_K8prLfso?autoplay=1&rel=0";
document.getElementById("onscreen").src = theLink;
});


// really annoying to play in the Background...this disables the link
$("#movie").on('hidden.bs.modal', function (e) {
    $("#movie iframe").attr("src", '');
});
于 2016-04-14T10:25:59.057 に答える
0

多くのビデオを含む複数のモーダルがある場合、たとえば、カルーセルの各スライドにモーダルがあるとします。表示されているスライドでビデオを閉じたり停止したり、他のすべてのモーダルを台無しにしないために、より動的なものが必要です。これを使用します:

$(".modal").on('hidden.bs.modal', function (e) {
      $(this).find("iframe").attr("src", $(this).find("iframe").attr("src"));
  });
于 2020-01-11T12:31:41.527 に答える