web-dev-qa-db-ja.com

iOSのSafariにHTML5ビデオポスターが表示されないのはなぜですか？

私はこのウェブページを持っています：
http://healthpad.net/dashboard/
10個の<video>要素。

何らかの理由で、iPadにページを読み込むと、ビデオポスターが表示されません。

以下を試してください：

  1. デスクトップブラウザーでページを読み込む
  2. iPadまたはiPadシミュレーターにロードすると、再生ボタンのある大きなブラックボックスが表示されます

image

これが起こっている理由を教えてください？

既に除外しているものは次のとおりです。

Image Content-Typeヘッダー
画像のコンテンツタイプヘッダーが適切に設定されていることを確認しました。上記の例では、Content-Typeヘッダーが正しくimage/jpeg。

video.jsライブラリとの干渉
VideoJsを使用して、デスクトップブラウザーのNice再生ボタンを表示し、コントロールをカスタマイズします。ただし、このライブラリはネイティブプレーヤーに干渉しません。
念のため、video-jsクラスのないテスト動画ページを作成したため、ライブラリはその動画を取得して処理しません。実際、テストページにはJSライブラリも含まれていません。

<html><body>
    <video
        controls
        height="400"
        width="600"
        poster="http://healthpad.net/media/CACHE/images/uploads/video_poster_1414/bd5fba5a68ddd0f4b3f61193f6908962.jpg"
        src="http://healthpad.net/media/uploads/video_processed_720p_1414.mp4"
    ></video>
</body></html>

http://healthpad.net/rj_templates/test/zzz/

Mobile Safariでサポートされていない可能性のあるビデオ属性の使用法
上記のテストページには、単純な動画タグがあります。 srcとposterを除く他のすべての属性を削除しようとしましたが、役に立ちませんでした。

このトピックに関するStackOverflowの質問のほとんどは、「iPadを再起動してください」と言うだけです

ここで奇妙になります：

これについてグーグルで検索した場合、受け入れられたStackOverflowの答えは、「iPadを再起動してください、それで私のためになりました」と言うことがよくあります。

だから私は同じことをやってみましたが、最初は私の場合はうまくいかないと言いました。

次に、私はこれを試しました：
（iPadシミュレーターでは以下のすべて）

  1. サイトにアクセスしても、ビデオポスターは表示されません
  2. テストページに移動します（ http://healthpad.net/rj_templates/test/zzz/ ）、ビデオポスターは表示されません。
  3. ホームをクリックしてSafariを終了します（または、シミュレーターのCmd + Shift + H Macショートカット）
  4. ホームボタンをダブルクリックしてSafariの外にタスクスイッチャーを表示し、キルボタンが表示されるまでサファリアイコンをタップアンドホールドします。
  5. サファリを殺す
  6. サファリを開きます（再起動）。この時点で、テストページ（ビデオが1つだけのページ）を読み込むと、ポスターが表示されます。
  7. 次に、マルチビデオページに移動します：（ http://healthpad.net/dashboard/ ）。ビデオポスターは表示されません。
  8. 単一ビデオのテストページに戻りますが、そのビデオポスターも機能しなくなりました。
  9. 手順3から8を繰り返して、ビデオポスターの動作が停止するプロセスを確認します。

どうやら、ある時点で、Mobile Safariはビデオポスターを表示しないことを決定します。また、明らかに、私のサイトはこの状態を引き起こします。

明確化：

ポスターが機能しなくなると、1つのドメインでのみ発生するわけではなく、まったく別のドメインにあるかどうかに関係なく、他のサイトにビデオポスターが読み込まれません（例： http：/ /www.videojs.com/ ）。

この動作をリセットするには、私が見たものから、Safariを強制終了して再起動する必要があります。閉じて再度開くだけでは、この状態はリセットされません。

なぜこれが起こっているのか誰にも分かりますか？それを回避する方法はありますか？

iosipadhtml5-videomobile-safari
32
Prody

JPGの代わりにPNGを使用して、これを機能させました。

奇妙なことに、JPGはiOS Safariでローカルに（ローカルWiFiのPOWサーバー経由で）動作しましたが、ステージングにプッシュされたときにポスター画像がロードされませんでした。ローカルコードとステージングコードの両方が、S3上の同じファイルを参照していました。

ファイル形式をPNGに変更すると、問題なくロードされます。

15
Dan Weaver

答えはありませんが、質問は時々賛成され続けます。だからここに私がやったことです：

IOSでは、ビデオプレーヤーを表示する代わりに（autoload=false）、ポスターと再生ボタン、2つのスタンドアロン<img>タグ。クリックされたら、JavaScriptからビデオプレーヤーを作成し、再生するように指示します。正常に機能し、ユーザーには大きな違いはありません。

2
Prody

Safariの設定[iOS7]で[ポップアップをブロック]が[オフ]になっていると、これが解決したようです。

0
Tim