mediaElement.js + reveal jquery modal：＆＃215; でビデオ/オーディオを一時停止する方法

StackOverflow https://stackoverflow.com/questions/8815470

質問

プレイヤーを同時に一時停止し、含むモーダルが（「reveal」という不変」）を滑らせる（reveal」）を引き起こすにはどうすればよいですか？

現在、再生ボタンがクリックされ、モーダルの上部左（x）...＆＃215; ...がクリックされます...モーダルは去りますが、ビデオは引き続き再生されます。これを回避するには、ユーザーは次のとおりです。1）ビデオを一時停止し、2）モーダルを閉じます。クリックするか、モーダルのトリガー（インスタンス）をタップして、（x）をクリックして、両方のアクションを同時に実行します。プラットフォーム /デバイス全体で動作するソリューションを見つけようとしています。

これが私がこれまでに得たものです、それは機能していません...

スクリプトタグ間のDOMのヘッド

      document.getElementById("pauseX").onclick = function () {
      document.getElementById('player2').pause();
      };

モーダルを明らかにするトリガー

   <a href="#" data-reveal-id="vid-1">Click here to reveal modal.</a>

ビデオ +モーダルコンテナ

   <div id="vid-1" class="reveal-modal">
       <div class="center">
           <video width="480" height="270" id="player2" poster="../media/vid-1.jpg" controls="controls" preload="none">
               <source type="video/mp4" src="../media/vid-1-480x320.mp4" />
               <source type="video/webm" src="../media/vid-1-640x480.webm" />
               <object width="480" height="270" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">         
                   <param name="movie" value="../build/flashmediaelement.swf" /> 
                   <param name="flashvars" value="controls=true&amp;file=../media/vid-1-480x320.mp4" />         
                   <img src="../media/vid-1.jpg" width="480" height="270" alt="Vid 1" 
        title="No video playback. Update browser, enable Javascript, or install Flash." />
               </object>    
           </video>
          </div>
          <a id="pauseX" class="close-reveal-modal">&#215;</a>
   </div>

すでに...を含む他の多くのソリューションを試しました...

html5ビデオ再生を停止するJavaScriptmodのウィンドウの閉鎖

...だからどんな助けも感謝しています。 mediaElement.jsまたはrevelie.jsファイルを調整する必要があるか何かが必要になる可能性があると思いますか？

ちなみに、モーダルの外側のどこかをクリックすると、「光沢」では、それがスライドアップ/アウェイを引き起こします。キーボードのエスケープキーを押すと同じことができます。ビデオプレーヤーのどこにでもクリックすると、一時停止します。これらの機能のすべてがモバイルデバイスをタップすることとともに保持されている場合、それが大好きです。 （まだテストしていません。）

役に立ちましたか？

解決 2

このスクリプトで解決しました...

<script>
    $('.close-reveal-modal').click(function() {
        $('video, audio').each(function() {
            $(this)[0].player.pause();        
        });
    });
</script>

各ページに複数のMediaElement.js Vids（潜在的なモーダルごとに1つ）がありました...各VIDは同じID = "player2"属性で識別されています...これもページの検証を妨げていました。 GetElementByIDからGetElementByNameに元のスクリプトでそれを切り替えようとしました...うまくいきませんでした。各プレイヤーのIDの代わりにクラスを作成しました...それ うまくいきませんでした。検証の問題に関係なく：上記の解決策 - close-reveal-modalクラスをmediaElement.jsの「すべての停止」スクリプトに直接挿入することは、うまく機能します。 （@fabrizioに感謝します。

他のヒント

あなたが持っている場合 document.getElementById("pauseX").onclick... ドキュメントの上部では、おそらくIDの要素があるため、コードは機能しません。 pauseX まだDOMにはありません。 JavaScriptコンソールを見ると、関連するエラーが表示されます

これらの指示を下またはDOM対応イベントに移動してみてください

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top