5

HTML5ビデオを使用するiPad専用のサイトで作業していて、ビデオの再生は機能していますが、ポスター画像を表示することはできません。デスクトップSafariでは問題なく表示されます。コードは次のとおりです。

<video src="video/about_the_man.mp4" controls height=360 width=480  poster="video/posters/about_the_man.jpg"></video>

このリンクを参照として使用しています（リスト1.2）：https ://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/ TP40009523-CH2-SW6

iOSでは、ユーザーが再生を開始するまでポスター画像が表示されると書かれていますが、現在表示されているのは、中央に大きな再生ボタンがある黒いビデオサイズの画面だけです。私はこのトップ（こことここ）の他の投稿を見てきましたが、どちらの解決策も私にはうまくいきませんでした。このサイトで少し型破りなのは、ビデオ要素がインラインライトボックスにあることだけです。そのため、最初はページロード時に表示されませんが、なぜそれが違いを生むのかわかりません。

4

2 に答える 2

6

私はまったく同じ問題を抱えていました。私は自分のコードを他のiPadで試してみることにしましたが、うまくいきました。ポスター画像が表示されました。

少し頭をかいた後、解決策はiPadをハードリセットして再試行することでした。再起動後、iPadにポスター画像が表示されました。

多分それはあなたのために働くでしょうか？

于 2011-02-24T16:15:51.980 に答える
2

iPadにロードできる画像の量には制限があることがわかりました

これがそれが言うことです：

最近、iPadでAJAX-yサイトを構築するときに、モバイルSafariの制限にぶつかりました。大量の画像をロードすると、最終的にモバイルSafariはあなたを切断し、画像の代わりに[？]を表示します。いくつかのテストを行った後、この制限は約6.5MBであるように見えます。これが私が作成したテストページで、500kbの画像を20枚ロードしようとしています。iPadでこのページを開くと、チャールズでは200枚の画像が返されますが、7枚の画像は表示されません。これは、iPad/iPhoneのビデオタグで自動再生を無効にする方法と似ていると思います。Appleはおそらく、ユーザーが3Gで閲覧するときにダウンロードで過負荷にならないようにしたいと考えています。

とにかく、6.5 MBは高負荷であり、3Gではうまくいきませんが、何らかの理由でこの制限を回避することをお勧めします。コードにパッチを適用する最も簡単な方法は、を使用して画像をキャンバスタグに読み込むことでしたdrawImage()。キャンバスタグは制限の影響を受けないようです。

これは、 canvasタグを使用した別のテストページです。すべての画像が読み込まれるはずです。

于 2011-08-24T14:22:57.427 に答える