37

Safari モバイルとデスクトップの両方で正常に動作するページにビデオ要素を取得しました。正常に動作している半透明のプルダウン メニューがあります。問題は、メニューがビデオ要素の上にある場合、デスクトップサファリでは（必要に応じて）メニューの下にビデオが表示されるのに対し、モバイルバージョンでは、何を言ってもビデオ要素が前景にとどまる（醜い）ことですCSS。回避策はありますか？

問題のイメージ

4

12 に答える 12

40

この問題は、ビデオ要素が動的に作成された場合にのみ発生します。要素が読み込まれたときにページ内にあった場合は、正常にz-index機能します。

video要素を指定することにより、動的に作成されたビデオのz-indexを修正できます-webkit-transform-style: preserve-3d。

うん、それはIEのhaslayoutと同じくらい悪いです！

于 2011-02-04T07:25:26.977 に答える
10

残念ながら違います。

iOS が現在どのように機能しているかについての私の経験と理解に基づくと、これは不可能です。

iPad 上のモバイル Safari は、組み込みのハードウェア アクセラレーションを使用してビデオを再生し、バッテリ寿命を向上させる Quicktime ウィンドウの穴を開けます。(iPhone と iPod Touch では、別のウィンドウで開くだけで同じ効果が得られます。)

このウィンドウは、ページ上の他の HTML とうまく連携しません。実際、モバイル Safari でタグの上に何かを表示する方法を見つけられませんでした。これは、ハードウェア アクセラレーションがビデオのスケーリングとポジショニングのみを許可し、一度に 1 つのビデオしか処理できないためだと推測されます。

于 2010-09-10T17:36:14.717 に答える
9

私はflowplayerとシンプルなCSSドロップダウンメニューを使用していますが、同じ問題がありました.

タップすると、ビデオ領域の一部をカバーするドロップダウン メニューがあります。サブメニューは予想どおりビデオの上に表示されますが、タッチ イベントは送信されませんでした。

この質問に答える他の人からのいくつかの提案を組み合わせて修正しました:メニューを開くときに表示を非表示に設定し、サブメニューを閉じるときに表示を表示し、 -webkit-transform-style: preserve -3d CSS プロパティをビデオ。

関連するコードは次のとおりです。メニューバーの CSS は省きましたが、予想どおりの動作をします。結果として、ビデオの一部をカバーするメニューが作成されます。

メニューとビデオの HTML

<div id='nav'>
  <ul>
    ... <!-- bunch of ul/li stuff here for the menu and submenus -->
  </ul>
</div>
<div id='videoplayer'><!-- for flowplayer --></div>

CSS

video {
  -webkit-transform-style: preserve-3d;
}

Javascript

$(document).ready(function(){
  $("#nav li").hover(
    function() {
      $(this).find('ul:first').css({visibility: "visible",display: "none"}).fadeIn(300);
      $("video").css({visibility:"hidden"});
    },
    function(){ 
      $(this).find('ul:first').css({visibility: "hidden"});
      $("video").css({visibility:"visible"});
    }
  );
);
于 2012-02-11T22:33:53.363 に答える
5

ipad の mobile-safari で、html5 ビデオ タグの上にメニュー div を配置することができました。正直なところ、私は何の問題もありませんでした。CSS3アニメーションを使用していたため、GPUを使用していた可能性がありますか? ハックを使用して要素を GPU に追加してみてください。要素を配置-webkit-transform: translateZ(0);すると、強制的に GPU を使用する必要があります...

于 2010-09-20T09:57:28.700 に答える
1

-webkit-transform-style:preserve-3d私にはうまくいき-webkit-transform:translateZ(0)ませんでした。

Flowplayer を ipad プラグインとコントロールバー プラグインと共に使用すると、iPad で作成されたコントロール バーを削除し、モーダル ウィンドウの下で z インデックスを付けられるものに置き換えることができました。

于 2011-08-25T02:53:47.367 に答える
1

z-indexvideo 要素を指定することで、動的に作成された動画を修正できます-webkit-transform-style: preserve-3d。

これは、動的に作成されたビデオ要素で機能しました。z-indexまた、オーバーレイ div の を設定しましたが、z-index: 888;これも役に立った可能性があります。

于 2013-01-23T22:02:04.033 に答える
1

私もこれに遭遇しました。私のために仕事をすることができた唯一のことは、追加することでした

display:none

クリックする必要があるその上に div を表示するときに、video タグに。

于 2011-12-15T18:40:08.233 に答える
0

この静止画で問題が発生した場合、埋め込みコードのオプションを変更して、コントロール、おすすめの動画、動画のタイトルとプレーヤーのオプションを許可しないようにするという別の修正が有効でした。タブレットとモバイルの src を変更する単純なModernizr.MQクエリを追加し、モバイルの iframe src に以下を含めました。

?rel=0&controls=0&showinfo=0

これが機能する理由を完全に追跡したことはありませんが、コントロールには、高い z-index を与え、要素をすべての上に配置させるユーザー エージェント スタイルがあると推測されます。

于 2015-08-28T18:02:53.577 に答える
0

今日この問題に遭遇したばかりで、問題を完全に処理していないため、複数の回答から解決策をまとめなければなりませんでした...

折りたたまれた「テーブル ビュー」スタイルのリストにビデオ要素があり、他のリスト項目をタップしようとしたときに iPhone でタッチ イベントをキャプチャしていました。iPhone では、たまたま画面上の同じ場所を占めていた他の折りたたまれた要素をタップすると、ビデオが再生されました。

これを修正するには、次のすべてが必要でした。

1）これを使用して：

video{
    -webkit-transform-style: preserve-3d;
  }

... 効果がないように見えましたが、とにかくそのままにしておきました。すべてが機能するようになったので、これ以上面倒なことはしたくありません:)

2) トグル visibility: hiddenだけでは機能せずdisplay:none、期待どおりに機能しませんでした。

3) 「可視性」に加えて、HTML5 ビデオ タグcontrols属性も動的に追加/削除する必要があります。また：

$("video").css({visibility:"hidden"}).removeAttr("controls");また$("video").css({visibility:"visible"}).attr("controls", "controls");

4) 初期ブラウザ/画面サイズに基づいて、ドキュメント読み込みの表示/制御を設定する必要があります

5) 主な懸念事項は iPhone の動作がおかしかったことですが、最小のメディア クエリ ブレークポイントである 600px を超えるレスポンシブ ウィンドウ サイズの変更も考慮する必要がありました。

$(window).resize(function(){
    if ($(window).width() > 600){
        $("video").css({visibility:"visible"}).attr("controls", "controls");
    }
});

本質的にばかげたモバイル Safari のバグを回避するのはかなりの苦痛です...後でテストするときに iPad で動作することを願っています...

于 2014-08-16T00:35:44.207 に答える
0

この問題は、オフ キャンバス メニューを備えたモバイル デバイスで発生していました。メニューがビデオの上にあるとき、どのメニュー項目もタップできませんでした。

メニューが表示されていないときに-100000pxに絶対に配置することで、メニューがオンのときにビデオを別の場所に移動して、相対的に配置されるように修正しました。

再度ブロックするように設定するとビデオが機能しないため、display none を使用しても機能しないことがわかりました。

また、高さを 0 に設定しようとしましたが、これはうまくいきませんでした。

最後の方法は少し極端に見えますが、使用しているときはあまり目立ちません。

于 2013-11-21T09:43:45.993 に答える