質問
プレイヤーを同時に一時停止し、含むモーダルが(「reveal」という不変」)を滑らせる(reveal」)を引き起こすにはどうすればよいですか?
現在、再生ボタンがクリックされ、モーダルの上部左(x)...× ...がクリックされます...モーダルは去りますが、ビデオは引き続き再生されます。これを回避するには、ユーザーは次のとおりです。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&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">×</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対応イベントに移動してみてください