ios - 再生ボタンオーバーレイなしでiOSでhtml5ビデオを表示する

Question

クリックするとhtml5のビデオプレーヤーが開く画像を表示しようとしていますが、その上に小さな半透明の再生ボタンを表示したくありません。そのアイコンをポスター画像の上に置かず、ポスター画像をそのまま表示するようにタグで指定する方法はありますか？

Answer 1

一部のCSSを使用して、iPhoneのオーバーレイ再生ボタンを非表示にできます。

video::-webkit-media-controls-start-playback-button {
  display: none;
}

Answer 2

更新：これはもはや最良の方法ではありません-実際の解決策については、以下のこの回答を参照してください。

---

私の知る限り、再生ボタンのオーバーレイはモバイルSafariのレンダリングエンジンによって追加されるため、非表示にする方法はありません。ただし、静止画像がクリックされたときに、ajaxを使用してビデオをロードするためにスプーフィングできる場合があります。例えば：

HTML

<div id="videoContainer">

</div>

CSS

#videoContainer {
  background-image: url(http://placehold.it/60x40.png);
  height: 40px;
  width: 60px;
}

JavaScript

$("#videoContainer").click(function() {
  $(this).css('background', 'none').parent().html("<video id=\"video\" width=\"60\" height=\"40\">\n" +
    "<source src=\"video.mp4\" type=\"video/mp4\">\n" +
    "<source src=\"video.ogg\" type=\"video/ogg\">\n" +
    "</video>");
  $("#video").get(0).play();
});

Answer 3

これを試してみてください

video::-webkit-media-controls {
    display: none;
}