14

YouTube iframe ビデオの上にインタラクション コントロールを配置したいのですがwmode=opaque、引数として追加するだけで問題なく動作し、要素を iframe の上に絶対配置します。

私の問題は、モバイルサファリでは、最初はコントロールが正常に機能することですが、フルスクリーンビデオから戻ると、すべて無効になっています。ただし、デスクトップでは問題なく動作します。

HTML は基本的に次のとおりです。

<iframe src="http://www.youtube.com/embed/[ID]?wmode=opaque"></iframe>
<button id="btn">Click me</button>

そして、ボタンは iframe の絶対上に配置されます。

デモについては、モバイル サファリを使用してこのフィドルにアクセスしてください: http://jsfiddle.net/SwGH5/embedded/result/

ボタンをクリックすると、アラートが生成されることがわかります。それでは、ビデオを再生して「完了」をクリックしてください。次に、ボタンをもう一度クリックしてみてください...

タグを使用してムービーが埋め込まれている場合<video>、フルスクリーン終了イベントをリッスンして何かを実行できますが、今は行き詰まっています...

これがフィドルです：http://jsfiddle.net/SwGH5

4

4 に答える 4

6

そこで、iframe APIを少しいじって、解決策を見つけました。ちょっとハッキーですが...そうではありません。ユーザーが動画をクリックして再生すると、document.activeElementが iframe になります。ユーザーが「完了」ボタンをクリックすると、document.activeElement === document.body. そのため、ビデオの再生が開始されると、アクティブな要素が本文に戻るかどうかを定期的にチェックします。その時点で、私が見つけた唯一の解決策は、iframe を再描画することでした。この例では、ビデオを destroy() し、iframe API を使用して再作成します。また、iframe のクローンを作成し、それを成功に置き換えようとしました (コードを残して、表示できるようにしました)。

http://jsfiddle.net/ryanwheale/SwGH5/105/

これは最善の解決策ではありませんが、機能します。また、何が起こっているのかを説明すると、iOS はビデオ コンテンツ (Safari または Chrome) をハイジャックし、ネイティブ ビデオ プレーヤーを使用して再生します。このような OS の機能はすべて、ブラウザーの「上」で実行されます。どの z-index よりも高く、完全にブラウザーの外部にあります。ユーザーが「完了」をクリックすると、ネイティブ プレーヤーがページに再移植されているかのようにズームアウトします。私の最善の推測は、ネイティブ プレーヤーがまだブラウザーの「上」にぶら下がっているため、その下にあるものにアクセスできなくなっていることです。ボタンが上にあるように見えるという事実は、単なる異常です...より良い説明がないためです.

于 2014-06-27T00:30:36.923 に答える
0

通常の iframe で動作させることができない場合は、mediaelement.js の使用を検討することをお勧めします。これにより、Youtube API を HTML5 Media API ラッパーでラップできます。これは ios の safari で問題なく動作します - mediaelementjs.com でYoutube の例を試してください。

必要なことは、mejs js/css を追加し、YouTube ビデオをビデオ タグのソースとして配置することだけです。mediaelementjs.com から取得したマークアップの例を次に示します。

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

次に、次のようにプレーヤーを起動します。

jQuery(document).ready(function($) {
    $('#player1').mediaelementplayer();
});

mejs プレーヤーの上にボタンを追加する場合は、うまく機能します。z-index を十分に高く設定するだけです。通常の再生ボタンが必要な場合は、mejs に付属している既存のボタンのスタイルを検討することもできます。

于 2013-10-26T09:04:24.390 に答える
0

@CullenJ の回答からのコメントによると、iframe 要素でクリック イベントをトリガーしない iOS デバイス ブラウザの問題が原因である可能性があります。その場合、次のように変更する必要があります。

document.getElementById('btn').onclick = function() {
    alert('clicked');
}

このようなものに（@smnh の回答による）：

$('#btn').on('click tap touchstart', function() {
    alert('clicked');
});
于 2014-06-24T15:55:12.250 に答える